fix colors for default light mode theme

web/src/components/Statusbar.tsx

@@ -32,7 +32,7 @@ export default function Statusbar() {
   const { potentialProblems } = useStats(stats);
 
   return (
-    <div className="absolute left-0 bottom-0 right-0 w-full h-8 flex justify-between items-center px-4 bg-primary z-10 dark:text-secondary-foreground border-t border-secondary-highlight">
+    <div className="absolute left-0 bottom-0 right-0 w-full h-8 flex justify-between items-center px-4 bg-background_alt z-10 dark:text-secondary-foreground border-t border-secondary-highlight">
       <div className="h-full flex items-center gap-2">
         {cpuPercent && (
           <div className="flex items-center text-sm gap-2">

web/src/components/filter/CameraGroupSelector.tsx

@@ -131,7 +131,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
           size="xs"
           onClick={() => setAddGroup(true)}
         >
-          <LuPlus className="size-4 text-primary-foreground" />
+          <LuPlus className="size-4 text-primary" />
         </Button>
       )}
     </div>
@@ -253,7 +253,7 @@ function NewGroupDialog({ open, setOpen, currentGroups }: NewGroupDialogProps) {
         {currentGroups.length > 0 && <DropdownMenuSeparator />}
         {editState == "none" && (
           <Button
-            className="text-primary-foreground justify-start"
+            className="text-primary justify-start"
             variant="ghost"
             onClick={() => setEditState("add")}
           >

web/src/components/filter/FilterCheckBox.tsx

@@ -19,7 +19,7 @@ export default function FilterCheckBox({
 }: FilterCheckBoxProps) {
   return (
     <Button
-      className="capitalize flex justify-between items-center cursor-pointer w-full text-primary-foreground"
+      className="capitalize flex justify-between items-center cursor-pointer w-full text-primary"
       variant="ghost"
       onClick={() => onCheckedChange(!isChecked)}
     >

web/src/components/filter/LogLevelFilter.tsx

@@ -19,7 +19,7 @@ export function LogLevelFilterButton({
   const trigger = (
     <Button size="sm" className="flex items-center gap-2" variant="secondary">
       <FaFilter className="text-secondary-foreground" />
-      <div className="hidden md:block text-primary-foreground">Filter</div>
+      <div className="hidden md:block text-primary">Filter</div>
     </Button>
   );
   const content = (
@@ -61,7 +61,7 @@ export function GeneralFilterContent({
       <div className="h-auto overflow-y-auto overflow-x-hidden">
         <div className="flex justify-between items-center my-2.5">
           <Label
-            className="mx-2 text-primary-foreground cursor-pointer"
+            className="mx-2 text-primary cursor-pointer"
             htmlFor="allLabels"
           >
             All Logs
@@ -82,7 +82,7 @@ export function GeneralFilterContent({
           {["debug", "info", "warning", "error"].map((item) => (
             <div className="flex justify-between items-center">
               <Label
-                className="w-full mx-2 text-primary-foreground capitalize cursor-pointer"
+                className="w-full mx-2 text-primary capitalize cursor-pointer"
                 htmlFor={item}
               >
                 {item.replaceAll("_", " ")}

web/src/components/filter/ReviewActionGroup.tsx

@@ -40,7 +40,7 @@ export default function ReviewActionGroup({
         <div className="p-1">{`${selectedReviews.length} selected`}</div>
         <div className="p-1">{"|"}</div>
         <div
-          className="p-2 text-primary-foreground cursor-pointer hover:bg-secondary hover:rounded-lg"
+          className="p-2 text-primary cursor-pointer hover:bg-secondary hover:rounded-lg"
           onClick={onClearSelected}
         >
           Unselect
@@ -58,7 +58,7 @@ export default function ReviewActionGroup({
             }}
           >
             <FaCompactDisc />
-            {isDesktop && <div className="text-primary-foreground">Export</div>}
+            {isDesktop && <div className="text-primary">Export</div>}
           </Button>
         )}
         <Button
@@ -68,9 +68,7 @@ export default function ReviewActionGroup({
           onClick={onMarkAsReviewed}
         >
           <FaCircleCheck />
-          {isDesktop && (
+          {isDesktop && <div className="text-primary">Mark as reviewed</div>}
-            <div className="text-primary-foreground">Mark as reviewed</div>
-          )}
         </Button>
         <Button
           className="p-2 flex items-center gap-1"
@@ -79,7 +77,7 @@ export default function ReviewActionGroup({
           onClick={onDelete}
         >
           <HiTrash />
-          {isDesktop && <div className="text-primary-foreground">Delete</div>}
+          {isDesktop && <div className="text-primary">Delete</div>}
         </Button>
       </div>
     </div>

web/src/components/filter/ReviewFilterGroup.tsx

@@ -227,10 +227,10 @@ function CamerasFilterButton({
       size="sm"
     >
       <FaVideo
-        className={`${selectedCameras?.length ? "text-primary dark:text-primary-foreground" : "text-secondary-foreground"}`}
+        className={`${selectedCameras?.length ? "text-primary dark:text-primary" : "text-secondary-foreground"}`}
       />
       <div
-        className={`hidden md:block ${selectedCameras?.length ? "text-primary dark:text-primary-foreground" : "text-primary-foreground"}`}
+        className={`hidden md:block ${selectedCameras?.length ? "text-primary dark:text-primary" : "text-primary"}`}
       >
         {selectedCameras == undefined
           ? "All Cameras"
@@ -379,7 +379,7 @@ function ShowReviewFilter({
   );
   return (
     <>
-      <div className="hidden h-9 md:flex p-2 justify-start items-center text-sm bg-secondary hover:bg-secondary/80 text-primary-foreground rounded-md cursor-pointer">
+      <div className="hidden h-9 md:flex p-2 justify-start items-center text-sm bg-secondary hover:bg-secondary/80 rounded-md cursor-pointer">
         <Switch
           id="reviewed"
           checked={showReviewedSwitch == 1}
@@ -387,7 +387,7 @@ function ShowReviewFilter({
             setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)
           }
         />
-        <Label className="ml-2 cursor-pointer" htmlFor="reviewed">
+        <Label className="ml-2 cursor-pointer text-primary" htmlFor="reviewed">
           Show Reviewed
         </Label>
       </div>
@@ -428,10 +428,10 @@ function CalendarFilterButton({
       variant="secondary"
     >
       <FaCalendarAlt
-        className={`${day == undefined ? "text-secondary-foreground" : "text-primary dark:text-primary-foreground"}`}
+        className={`${day == undefined ? "text-secondary-foreground" : "text-primary dark:text-primary"}`}
       />
       <div
-        className={`hidden md:block ${day == undefined ? "text-primary-foreground" : "text-primary dark:text-primary-foreground"}`}
+        className={`hidden md:block ${day == undefined ? "text-primary" : "text-primary dark:text-primary"}`}
       >
         {day == undefined ? "Last 24 Hours" : selectedDate}
       </div>
@@ -493,7 +493,7 @@ function GeneralFilterButton({
   const trigger = (
     <Button size="sm" className="flex items-center gap-2" variant="secondary">
       <FaFilter className="text-secondary-foreground" />
-      <div className="hidden md:block text-primary-foreground">Filter</div>
+      <div className="hidden md:block text-primary">Filter</div>
     </Button>
   );
   const content = (
@@ -565,7 +565,7 @@ export function GeneralFilterContent({
       <div className="h-auto overflow-y-auto overflow-x-hidden">
         <div className="flex justify-between items-center my-2.5">
           <Label
-            className="mx-2 text-primary-foreground cursor-pointer"
+            className="mx-2 text-primary cursor-pointer"
             htmlFor="allLabels"
           >
             All Labels
@@ -586,7 +586,7 @@ export function GeneralFilterContent({
           {allLabels.map((item) => (
             <div className="flex justify-between items-center">
               <Label
-                className="w-full mx-2 text-primary-foreground capitalize cursor-pointer"
+                className="w-full mx-2 text-primary capitalize cursor-pointer"
                 htmlFor={item}
               >
                 {item.replaceAll("_", " ")}
@@ -664,7 +664,7 @@ function ShowMotionOnlyButton({
 
   return (
     <>
-      <div className="hidden md:inline-flex items-center justify-center whitespace-nowrap text-sm bg-secondary hover:bg-secondary/80 text-primary-foreground h-9 rounded-md px-3 mx-1 cursor-pointer">
+      <div className="hidden md:inline-flex items-center justify-center whitespace-nowrap text-sm bg-secondary hover:bg-secondary/80 text-primary h-9 rounded-md px-3 mx-1 cursor-pointer">
         <Switch
           className="ml-1"
           id="collapse-motion"
@@ -672,7 +672,7 @@ function ShowMotionOnlyButton({
           onCheckedChange={setMotionOnlyButton}
         />
         <Label
-          className="mx-2 text-primary-foreground cursor-pointer"
+          className="mx-2 text-primary cursor-pointer"
           htmlFor="collapse-motion"
         >
           Motion only

web/src/components/graph/SystemGraph.tsx

@@ -128,7 +128,7 @@ export function ThresholdBarGraph({
     <div className="w-full flex flex-col">
       <div className="flex items-center gap-1">
         <div className="text-xs text-muted-foreground">{name}</div>
-        <div className="text-xs text-primary-foreground">
+        <div className="text-xs text-primary">
           {lastValue}
           {unit}
         </div>
@@ -219,15 +219,13 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
     <div className="w-full flex flex-col gap-2.5">
       <div className="w-full flex justify-between items-center gap-1">
         <div className="flex items-center gap-1">
-          <div className="text-xs text-primary-foreground">
+          <div className="text-xs text-primary">{getUnitSize(used)}</div>
-            {getUnitSize(used)}
+          <div className="text-xs text-primary">/</div>
-          </div>
-          <div className="text-xs text-primary-foreground">/</div>
           <div className="text-xs text-muted-foreground">
             {getUnitSize(total)}
           </div>
         </div>
-        <div className="text-xs text-primary-foreground">
+        <div className="text-xs text-primary">
           {Math.round((used / total) * 100)}%
         </div>
       </div>
@@ -367,7 +365,7 @@ export function CameraLineGraph({
                 style={{ color: GRAPH_COLORS[labelIdx] }}
               />
               <div className="text-xs text-muted-foreground">{label}</div>
-              <div className="text-xs text-primary-foreground">
+              <div className="text-xs text-primary">
                 {lastValues[labelIdx]}
                 {unit}
               </div>

web/src/components/indicators/Chip.tsx

@@ -49,7 +49,7 @@ export function LogChip({ severity, onClickSeverity }: LogChipProps) {
   const severityClassName = useMemo(() => {
     switch (severity) {
       case "info":
-        return "text-primary-foreground/60 bg-secondary hover:bg-secondary/60";
+        return "text-primary/60 bg-secondary hover:bg-secondary/60";
       case "warning":
         return "text-warning-foreground bg-warning hover:bg-warning/80";
       case "error":

web/src/components/navigation/Sidebar.tsx

@@ -10,7 +10,7 @@ function Sidebar() {
   const location = useLocation();
 
   return (
-    <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-primary border-r border-secondary-highlight">
+    <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-background_alt border-r border-secondary-highlight">
       <span tabIndex={0} className="sr-only" />
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />

web/src/components/overlay/ExportDialog.tsx

@@ -126,7 +126,7 @@ export default function ExportDialog({
             }}
           >
             <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
-            {isDesktop && <div className="text-primary-foreground">Export</div>}
+            {isDesktop && <div className="text-primary">Export</div>}
           </Button>
         </Trigger>
         <Content

web/src/components/overlay/LogInfoDialog.tsx

@@ -32,28 +32,24 @@ export default function LogInfoDialog({
         {logLine && (
           <div className="size-full flex flex-col gap-5">
             <div className="w-min flex flex-col gap-1.5">
-              <div className="text-sm text-primary-foreground/40">Type</div>
+              <div className="text-sm text-primary/40">Type</div>
               <LogChip severity={logLine.severity} />
             </div>
             <div className="flex flex-col gap-1.5">
-              <div className="text-sm text-primary-foreground/40">
+              <div className="text-sm text-primary/40">Timestamp</div>
-                Timestamp
-              </div>
               <div className="text-sm">{logLine.dateStamp}</div>
             </div>
             <div className="flex flex-col gap-1.5">
-              <div className="text-sm text-primary-foreground/40">Tag</div>
+              <div className="text-sm text-primary/40">Tag</div>
               <div className="text-sm">{logLine.section}</div>
             </div>
             <div className="flex flex-col gap-1.5">
-              <div className="text-sm text-primary-foreground/40">Message</div>
+              <div className="text-sm text-primary/40">Message</div>
               <div className="text-sm">{logLine.content}</div>
             </div>
             {helpfulLinks.length > 0 && (
               <div className="flex flex-col gap-1.5">
-                <div className="text-sm text-primary-foreground/40">
+                <div className="text-sm text-primary/40">Helpful Links</div>
-                  Helpful Links
-                </div>
                 {helpfulLinks.map((tip) => (
                   <Link to={tip.link} target="_blank" rel="noopener noreferrer">
                     <div className="text-sm text-selected hover:underline">

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -137,7 +137,8 @@ export default function MobileReviewSettingsDrawer({
       <div className="w-full p-4 flex flex-col gap-2">
         {features.includes("export") && (
           <Button
-            className="w-full flex justify-center items-center gap-2"
+            className="w-full flex justify-center items-center gap-2 dark:text-primary-foreground"
+            variant="secondary"
             onClick={() => setDrawerMode("export")}
           >
             <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
@@ -146,7 +147,8 @@ export default function MobileReviewSettingsDrawer({
         )}
         {features.includes("calendar") && (
           <Button
-            className="w-full flex justify-center items-center gap-2"
+            className="w-full flex justify-center items-center gap-2 dark:text-primary-foreground"
+            variant="secondary"
             onClick={() => setDrawerMode("calendar")}
           >
             <FaCalendarAlt className="fill-secondary-foreground" />
@@ -155,7 +157,8 @@ export default function MobileReviewSettingsDrawer({
         )}
         {features.includes("filter") && (
           <Button
-            className="w-full flex justify-center items-center gap-2"
+            className="w-full flex justify-center items-center gap-2 dark:text-primary-foreground"
+            variant="secondary"
             onClick={() => setDrawerMode("filter")}
           >
             <FaFilter className="fill-secondary-foreground" />

web/src/components/overlay/SaveExportOverlay.tsx

@@ -31,7 +31,7 @@ export default function SaveExportOverlay({
           Save Export
         </Button>
         <Button
-          className="flex items-center gap-1 text-primary-foreground"
+          className="flex items-center gap-1 text-primary"
           size="sm"
           variant="secondary"
           onClick={onCancel}

web/src/components/player/VideoControls.tsx

@@ -142,7 +142,7 @@ export default function VideoControls({
 
   return (
     <div
-      className={`px-4 py-2 flex justify-between items-center gap-8 text-primary-foreground dark:text-white z-50 bg-secondary-foreground/60 dark:bg-secondary/60 rounded-lg ${className ?? ""}`}
+      className={`px-4 py-2 flex justify-between items-center gap-8 text-primary dark:text-white z-50 bg-secondary-foreground/60 dark:bg-secondary/60 rounded-lg ${className ?? ""}`}
     >
       {video && features.volume && (
         <div className="flex justify-normal items-center gap-2">

web/src/components/timeline/segment-metadata.tsx

@@ -32,7 +32,7 @@ export function MinimapBounds({
     <>
       {isFirstSegmentInMinimap && (
         <div
-          className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] scroll-mt-8 pointer-events-none select-none"
+          className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary font-medium z-20 text-center text-[10px] scroll-mt-8 pointer-events-none select-none"
           ref={firstMinimapSegmentRef}
         >
           {new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
@@ -44,7 +44,7 @@ export function MinimapBounds({
       )}
 
       {isLastSegmentInMinimap && (
-        <div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] pointer-events-none select-none">
+        <div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary font-medium z-20 text-center text-[10px] pointer-events-none select-none">
           {new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
             hour: "2-digit",
             minute: "2-digit",

web/src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
+import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -9,7 +9,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+          "border-transparent bg-primary text-primary hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
@@ -20,8 +20,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
-)
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

web/src/components/ui/button.tsx

@@ -33,7 +33,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -52,7 +52,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  }
+  },
 );
 Button.displayName = "Button";
 

web/src/components/ui/sonner.tsx

@@ -15,13 +15,13 @@ const Toaster = ({ ...props }: ToasterProps) => {
           toast:
             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
           description: "group-[.toast]:text-muted-foreground",
-          actionButton:
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary",
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
           cancelButton:
             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
           success:
             "group toast group-[.toaster]:bg-success group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          error: "group toast group-[.toaster]:bg-danger group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          error:
+            "group toast group-[.toaster]:bg-danger group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
         },
       }}
       {...props}

web/src/pages/Logs.tsx

@@ -360,7 +360,7 @@ function Logs() {
             onClick={handleCopyLogs}
           >
             <FaCopy />
-            <div className="hidden md:block text-primary-foreground">
+            <div className="hidden md:block text-primary">
               Copy to Clipboard
             </div>
           </Button>
@@ -386,8 +386,8 @@ function Logs() {
         </Button>
       )}
 
-      <div className="size-full flex flex-col my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap bg-primary border border-secondary rounded-md overflow-hidden">
+      <div className="size-full flex flex-col my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap bg-background_alt border border-secondary rounded-md overflow-hidden">
-        <div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:px-2 *:py-3 *:text-sm *:text-primary-foreground/40">
+        <div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:px-2 *:py-3 *:text-sm *:text-primary/40">
           <div className="p-1 flex items-center capitalize">Type</div>
           <div className="col-span-2 sm:col-span-1 flex items-center">
             Timestamp

web/src/pages/SubmitPlus.tsx

@@ -239,7 +239,7 @@ function PlusFilterGroup({
         <Trigger asChild>
           <Button size="sm" className="mx-1 capitalize" variant="secondary">
             <FaVideo className="md:mr-[10px] text-secondary-foreground" />
-            <div className="hidden md:block text-primary-foreground">
+            <div className="hidden md:block text-primary">
               {selectedCameras == undefined
                 ? "All Cameras"
                 : `${selectedCameras.length} Cameras`}
@@ -316,7 +316,7 @@ function PlusFilterGroup({
         <Trigger asChild>
           <Button size="sm" className="mx-1 capitalize" variant="secondary">
             <FaList className="md:mr-[10px] text-secondary-foreground" />
-            <div className="hidden md:block text-primary-foreground">
+            <div className="hidden md:block text-primary">
               {selectedLabels == undefined
                 ? "All Labels"
                 : `${selectedLabels.length} Labels`}

web/src/pages/UIPlayground.tsx

@@ -318,7 +318,11 @@ function UIPlayground() {
                 <CameraActivityIndicator />
               </div>
               <p>
-                <Button onClick={handleZoomOut} disabled={zoomLevel === 0}>
+                <Button
+                  variant="default"
+                  onClick={handleZoomOut}
+                  disabled={zoomLevel === 0}
+                >
                   Zoom Out
                 </Button>
                 <Button

web/src/views/events/RecordingView.tsx

@@ -258,7 +258,7 @@ export function RecordingView({
           onClick={() => navigate(-1)}
         >
           <IoMdArrowRoundBack className="size-5" size="small" />
-          {isDesktop && <div className="text-primary-foreground">Back</div>}
+          {isDesktop && <div className="text-primary">Back</div>}
         </Button>
         <div className="flex items-center justify-end gap-2">
           <MobileCameraDrawer

web/src/views/live/LiveBirdseyeView.tsx

@@ -133,7 +133,7 @@ export default function LiveBirdseyeView() {
               onClick={() => navigate(-1)}
             >
               <IoMdArrowBack className="size-5" />
-              {isDesktop && <div className="text-primary-foreground">Back</div>}
+              {isDesktop && <div className="text-primary">Back</div>}
             </Button>
           ) : (
             <div />

web/src/views/live/LiveCameraView.tsx

@@ -230,9 +230,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 onClick={() => navigate(-1)}
               >
                 <IoMdArrowRoundBack className="size-5" />
-                {isDesktop && (
+                {isDesktop && <div className="text-primary">Back</div>}
-                  <div className="text-primary-foreground">Back</div>
-                )}
               </Button>
               <Button
                 className="flex items-center gap-2.5 rounded-lg"
@@ -252,9 +250,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 }}
               >
                 <LuHistory className="size-5" />
-                {isDesktop && (
+                {isDesktop && <div className="text-primary">History</div>}
-                  <div className="text-primary-foreground">History</div>
-                )}
               </Button>
             </div>
           ) : (
@@ -522,7 +518,7 @@ function PtzControlPanel({
       {ptz?.features?.includes("pt-r-fov") && (
         <>
           <Button
-            className={`${clickOverlay ? "text-selected" : "text-primary-foreground"}`}
+            className={`${clickOverlay ? "text-selected" : "text-primary"}`}
             onClick={() => setClickOverlay(!clickOverlay)}
           >
             <HiViewfinderCircle />

web/src/views/system/CameraMetrics.tsx

@@ -159,7 +159,7 @@ export default function CameraMetrics({
                   </div>
                   <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
                     {Object.keys(cameraCpuSeries).includes(camera.name) ? (
-                      <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+                      <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
                         <div className="mb-5">CPU</div>
                         <CameraLineGraph
                           graphId={`${camera.name}-cpu`}
@@ -175,7 +175,7 @@ export default function CameraMetrics({
                       <Skeleton className="size-full aspect-video" />
                     )}
                     {Object.keys(cameraFpsSeries).includes(camera.name) ? (
-                      <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+                      <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
                         <div className="mb-5">DPS</div>
                         <CameraLineGraph
                           graphId={`${camera.name}-dps`}

web/src/views/system/GeneralMetrics.tsx

@@ -285,7 +285,7 @@ export default function GeneralMetrics({
         </div>
         <div className="w-full mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
               <div className="mb-5">Detector Inference Speed</div>
               {detInferenceTimeSeries.map((series) => (
                 <ThresholdBarGraph
@@ -303,7 +303,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-video" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
               <div className="mb-5">Detector CPU Usage</div>
               {detCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -321,7 +321,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-video" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
               <div className="mb-5">Detector Memory Usage</div>
               {detMemSeries.map((series) => (
                 <ThresholdBarGraph
@@ -359,7 +359,7 @@ export default function GeneralMetrics({
             </div>
             <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
               {statsHistory.length != 0 ? (
-                <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+                <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
                   <div className="mb-5">GPU Usage</div>
                   {gpuSeries.map((series) => (
                     <ThresholdBarGraph
@@ -377,7 +377,7 @@ export default function GeneralMetrics({
                 <Skeleton className="w-full aspect-video" />
               )}
               {statsHistory.length != 0 ? (
-                <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+                <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
                   <div className="mb-5">GPU Memory</div>
                   {gpuMemSeries.map((series) => (
                     <ThresholdBarGraph
@@ -403,7 +403,7 @@ export default function GeneralMetrics({
         </div>
         <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
               <div className="mb-5">Process CPU Usage</div>
               {otherProcessCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -421,7 +421,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-tall" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+            <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
               <div className="mb-5">Process Memory Usage</div>
               {otherProcessMemSeries.map((series) => (
                 <ThresholdBarGraph

web/src/views/system/StorageMetrics.tsx

@@ -47,7 +47,7 @@ export default function StorageMetrics({
         General Storage
       </div>
       <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
-        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
           <div className="mb-5">Recordings</div>
           <StorageGraph
             graphId="general-recordings"
@@ -55,7 +55,7 @@ export default function StorageMetrics({
             total={totalStorage.total}
           />
         </div>
-        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
           <div className="mb-5">/tmp/cache</div>
           <StorageGraph
             graphId="general-cache"
@@ -63,7 +63,7 @@ export default function StorageMetrics({
             total={stats.service.storage["/tmp/cache"]["total"]}
           />
         </div>
-        <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+        <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
           <div className="mb-5">/dev/shm</div>
           <StorageGraph
             graphId="general-shared-memory"
@@ -77,7 +77,7 @@ export default function StorageMetrics({
       </div>
       <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
         {Object.keys(cameraStorage).map((camera) => (
-          <div className="p-2.5 bg-secondary dark:bg-primary rounded-2xl flex-col">
+          <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
             <div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
             <StorageGraph
               graphId={`${camera}-storage`}

web/tailwind.config.js

@@ -44,6 +44,7 @@ module.exports = {
         danger: "#ef4444",
         success: "#22c55e",
         background: "hsl(var(--background))",
+        background_alt: "hsl(var(--background-alt))",
         foreground: "hsl(var(--foreground))",
         selected: "hsl(var(--selected))",
         primary: {

web/themes/theme-default.css

@@ -3,6 +3,9 @@
     --background-hsl: hsl(0 0% 100%);
     --background: 0 0% 100%;
 
+    --background-alt-hsl: hsl(0 0% 98.5%);
+    --background-alt: 0 0% 98.5%;
+
     --foreground: hsl(222.2 84% 4.9%);
     --foreground: 222.2 84% 4.9%;
 
@@ -18,17 +21,17 @@
     --popover-foreground: hsl(222.2 84% 4.9%);
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: hsl(0 0% 100%);
+    --primary: hsl(222.2, 37.4%, 11.2%);
-    --primary: 0 0% 100%;
+    --primary: 222.2 47.4% 11.2%;
 
-    --primary-foreground: hsl(0, 0%, 0%);
+    --primary-foreground: hsl(210 40% 98%);
-    --primary-foreground: 0 0% 0%;
+    --primary-foreground: 210 40% 98%;
 
-    --secondary: hsl(0, 0%, 96%);
+    --secondary: hsl(210 20% 94.1%);
-    --secondary: 0 0% 96%;
+    --secondary: 210 20% 94.1%;
 
-    --secondary-foreground: hsl(0, 0%, 70%);
+    --secondary-foreground: hsl(222.2 47.4% 21.2%);
-    --secondary-foreground: 0 0% 70%;
+    --secondary-foreground: 222.2 47.4% 21.2%;
 
     --secondary-highlight: hsl(0, 0%, 94%);
     --secondary-highlight: 0 0% 94%;
@@ -36,8 +39,8 @@
     --muted: hsl(210 40% 96.1%);
     --muted: 210 40% 96.1%;
 
-    --muted-foreground: hsl(0, 0%, 64%);
+    --muted-foreground: hsl(215.4 6.3% 46.9%);
-    --muted-foreground: 0, 0%, 64%;
+    --muted-foreground: 215.4 6.3% 46.9%;
 
     --accent: hsl(210 40% 96.1%);
     --accent: 210 40% 96.1%;
@@ -94,6 +97,9 @@
     --background-hsl: hsl(0 0 0%);
     --background: 0 0% 0%;
 
+    --background-alt-hsl: hsl(0 0 9%);
+    --background-alt: 0 0% 9%;
+
     --foreground: hsl(0, 0%, 100%);
     --foreground: 0, 0%, 100%;
 
@@ -109,8 +115,8 @@
     --popover-foreground: hsl(0, 0%, 100%);
     --popover-foreground: 210 40% 98%;
 
-    --primary: hsl(0, 0%, 9%);
+    --primary: hsl(0, 0%, 91%);
-    --primary: 0 0% 9%;
+    --primary: 0 0% 91%;
 
     --primary-foreground: hsl(0, 0%, 100%);
     --primary-foreground: 0 0% 100%;