Fix colors for default light mode theme (#10909)

* fix colors for default light mode theme

* remove redundancy

* fix export dialog

* don't use primary-foreground

* change secondary button variant to be default button

* change filters button to bg-selected when filtering

* slightly lighten secondary-foreground in light mode

* fix mobile motion only button

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/dynamic/NewReviewData.tsx

@@ -34,7 +34,6 @@ export default function NewReviewData({
               ? "animate-in slide-in-from-top duration-500"
               : "invisible"
           }  text-center mt-5 mx-auto bg-gray-400 text-white`}
-          variant="secondary"
           onClick={() => {
             pullLatestData();
             if (contentRef.current) {

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

@@ -17,9 +17,9 @@ export function LogLevelFilterButton({
   updateLabelFilter,
 }: LogLevelFilterButtonProps) {
   const trigger = (
-    <Button size="sm" className="flex items-center gap-2" variant="secondary">
+    <Button size="sm" className="flex items-center gap-2">
       <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
@@ -50,7 +50,6 @@ export default function ReviewActionGroup({
         {selectedReviews.length == 1 && (
           <Button
             className="p-2 flex items-center gap-2"
-            variant="secondary"
             size="sm"
             onClick={() => {
               onExport(selectedReviews[0]);
@@ -58,28 +57,24 @@ export default function ReviewActionGroup({
             }}
           >
             <FaCompactDisc />
-            {isDesktop && <div className="text-primary-foreground">Export</div>}
+            {isDesktop && <div className="text-primary">Export</div>}
           </Button>
         )}
         <Button
           className="p-2 flex items-center gap-2"
-          variant="secondary"
           size="sm"
           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"
-          variant="secondary"
           size="sm"
           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

@@ -223,14 +223,13 @@ function CamerasFilterButton({
   const trigger = (
     <Button
       className={`flex items-center gap-2 capitalize ${selectedCameras?.length ? "bg-selected hover:bg-selected" : ""}`}
-      variant="secondary"
       size="sm"
     >
       <FaVideo
-        className={`${selectedCameras?.length ? "text-primary dark:text-primary-foreground" : "text-secondary-foreground"}`}
+        className={`${selectedCameras?.length ? "text-background 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-background dark:text-primary" : "text-primary"}`}
       >
         {selectedCameras == undefined
           ? "All Cameras"
@@ -316,7 +315,6 @@ function CamerasFilterButton({
           Apply
         </Button>
         <Button
-          variant="secondary"
           onClick={() => {
             setCurrentCameras(undefined);
             updateCameraFilter(undefined);
@@ -379,7 +377,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 +385,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>
@@ -395,11 +393,10 @@ function ShowReviewFilter({
       <Button
         className={`block md:hidden duration-0 ${showReviewedSwitch == 1 ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
         size="sm"
-        variant="secondary"
         onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
       >
         <FaCheckCircle
-          className={`${showReviewedSwitch == 1 ? "fill-primary dark:fill-primary-foreground" : "text-muted-foreground"}`}
+          className={`${showReviewedSwitch == 1 ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
         />
       </Button>
     </>
@@ -425,13 +422,12 @@ function CalendarFilterButton({
     <Button
       size="sm"
       className={`flex items-center gap-2 ${day == undefined ? "bg-secondary hover:bg-secondary/80" : "bg-selected hover:bg-selected"}`}
-      variant="secondary"
     >
       <FaCalendarAlt
-        className={`${day == undefined ? "text-secondary-foreground" : "text-primary dark:text-primary-foreground"}`}
+        className={`${day == undefined ? "text-secondary-foreground" : "text-background 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-background dark:text-primary"}`}
       >
         {day == undefined ? "Last 24 Hours" : selectedDate}
       </div>
@@ -447,7 +443,6 @@ function CalendarFilterButton({
       <DropdownMenuSeparator />
       <div className="p-2 flex justify-center items-center">
         <Button
-          variant="secondary"
           onClick={() => {
             updateSelectedDay(undefined);
           }}
@@ -491,9 +486,18 @@ function GeneralFilterButton({
   );
 
   const trigger = (
-    <Button size="sm" className="flex items-center gap-2" variant="secondary">
+    <Button
-      <FaFilter className="text-secondary-foreground" />
+      size="sm"
-      <div className="hidden md:block text-primary-foreground">Filter</div>
+      className={`flex items-center gap-2 capitalize ${selectedLabels?.length ? "bg-selected hover:bg-selected" : ""}`}
+    >
+      <FaFilter
+        className={`${selectedLabels?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+      />
+      <div
+        className={`hidden md:block ${selectedLabels?.length ? "text-background dark:text-primary" : "text-primary"}`}
+      >
+        Filter
+      </div>
     </Button>
   );
   const content = (
@@ -565,7 +569,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 +590,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("_", " ")}
@@ -636,7 +640,6 @@ export function GeneralFilterContent({
           Apply
         </Button>
         <Button
-          variant="secondary"
           onClick={() => {
             setCurrentLabels(undefined);
             updateLabelFilter(undefined);
@@ -664,7 +667,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 +675,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
@@ -682,12 +685,11 @@ function ShowMotionOnlyButton({
       <div className="block md:hidden">
         <Button
           size="sm"
-          variant="secondary"
           className={`duration-0 ${motionOnlyButton ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
           onClick={() => setMotionOnlyButton(!motionOnlyButton)}
         >
           <FaRunning
-            className={`${motionOnlyButton ? "fill-primary dark:fill-primary-foreground" : "text-muted-foreground"}`}
+            className={`${motionOnlyButton ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
           />
         </Button>
       </div>

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

@@ -119,14 +119,13 @@ export default function ExportDialog({
         <Trigger asChild>
           <Button
             className="flex items-center gap-2"
-            variant="secondary"
             size="sm"
             onClick={() => {
               setMode("select");
             }}
           >
             <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
@@ -374,7 +373,7 @@ function CustomTimeSelector({
 
   return (
     <div
-      className={`mt-3 flex items-center bg-secondary rounded-lg ${isDesktop ? "mx-8 px-2 gap-2" : "pl-2"}`}
+      className={`mt-3 flex items-center bg-secondary text-secondary-foreground rounded-lg ${isDesktop ? "mx-8 px-2 gap-2" : "pl-2"}`}
     >
       <FaCalendarAlt />
       <Popover
@@ -387,8 +386,8 @@ function CustomTimeSelector({
       >
         <PopoverTrigger asChild>
           <Button
-            className={isDesktop ? "" : "text-xs"}
+            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-            variant={startOpen ? "select" : "secondary"}
+            variant={startOpen ? "select" : "default"}
             size="sm"
             onClick={() => {
               setStartOpen(true);
@@ -438,7 +437,7 @@ function CustomTimeSelector({
           />
         </PopoverContent>
       </Popover>
-      <FaArrowRight className="size-4" />
+      <FaArrowRight className="size-4 text-primary" />
       <Popover
         open={endOpen}
         onOpenChange={(open) => {
@@ -449,8 +448,8 @@ function CustomTimeSelector({
       >
         <PopoverTrigger asChild>
           <Button
-            className={isDesktop ? "" : "text-xs"}
+            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
-            variant={endOpen ? "select" : "secondary"}
+            variant={endOpen ? "select" : "default"}
             size="sm"
             onClick={() => {
               setEndOpen(true);

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/MobileCameraDrawer.tsx

@@ -23,7 +23,7 @@ export default function MobileCameraDrawer({
   return (
     <Drawer open={cameraDrawer} onOpenChange={setCameraDrawer}>
       <DrawerTrigger asChild>
-        <Button className="rounded-lg capitalize" size="sm" variant="secondary">
+        <Button className="rounded-lg capitalize" size="sm">
           <FaVideo className="text-secondary-foreground" />
         </Button>
       </DrawerTrigger>

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -146,19 +146,23 @@ 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 ${filter?.after ? "bg-selected text-background dark:text-primary" : ""}`}
             onClick={() => setDrawerMode("calendar")}
           >
-            <FaCalendarAlt className="fill-secondary-foreground" />
+            <FaCalendarAlt
+              className={`${filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+            />
             Calendar
           </Button>
         )}
         {features.includes("filter") && (
           <Button
-            className="w-full flex justify-center items-center gap-2"
+            className={`w-full flex justify-center items-center gap-2 ${filter?.labels ? "bg-selected text-background dark:text-primary" : ""}`}
             onClick={() => setDrawerMode("filter")}
           >
-            <FaFilter className="fill-secondary-foreground" />
+            <FaFilter
+              className={`${filter?.labels ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+            />
             Filter
           </Button>
         )}
@@ -220,7 +224,6 @@ export default function MobileReviewSettingsDrawer({
         <SelectSeparator />
         <div className="p-2 flex justify-center items-center">
           <Button
-            variant="secondary"
             onClick={() => {
               onUpdateFilter({
                 ...filter,
@@ -280,12 +283,13 @@ export default function MobileReviewSettingsDrawer({
       >
         <DrawerTrigger asChild>
           <Button
-            className="rounded-lg capitalize"
+            className={`rounded-lg capitalize ${filter?.labels || filter?.after ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
             size="sm"
-            variant="secondary"
             onClick={() => setDrawerMode("select")}
           >
-            <FaCog className="text-secondary-foreground" />
+            <FaCog
+              className={`${filter?.labels || filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+            />
           </Button>
         </DrawerTrigger>
         <DrawerContent className="max-h-[80dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">

web/src/components/overlay/MobileTimelineDrawer.tsx

@@ -22,7 +22,7 @@ export default function MobileTimelineDrawer({
   return (
     <Drawer open={drawer} onOpenChange={setDrawer}>
       <DrawerTrigger asChild>
-        <Button className="rounded-lg capitalize" size="sm" variant="secondary">
+        <Button className="rounded-lg capitalize" size="sm">
           <FaFlag className="text-secondary-foreground" />
         </Button>
       </DrawerTrigger>

web/src/components/overlay/SaveExportOverlay.tsx

@@ -31,9 +31,8 @@ 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}
         >
           <LuX />

web/src/components/overlay/VainfoDialog.tsx

@@ -44,9 +44,7 @@ export default function VainfoDialog({
           <ActivityIndicator />
         )}
         <DialogFooter>
-          <Button variant="secondary" onClick={() => setShowVainfo(false)}>
+          <Button onClick={() => setShowVainfo(false)}>Close</Button>
-            Close
-          </Button>
           <Button variant="select" onClick={() => onCopyVainfo()}>
             Copy
           </Button>

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 z-50 bg-background/60 rounded-lg ${className ?? ""}`}
     >
       {video && features.volume && (
         <div className="flex justify-normal items-center gap-2">
@@ -170,9 +170,9 @@ export default function VideoControls({
       )}
       <div className="cursor-pointer" onClick={onTogglePlay}>
         {isPlaying ? (
-          <LuPause className="size-5 fill-primary-foreground dark:fill-white" />
+          <LuPause className="size-5 text-primary fill-primary" />
         ) : (
-          <LuPlay className="size-5 fill-primary-foreground dark:fill-white" />
+          <LuPlay className="size-5 text-primary fill-primary" />
         )}
       </div>
       {features.seek && (

web/src/components/timeline/SummaryTimeline.tsx

@@ -355,7 +355,7 @@ export function SummaryTimeline({
         ref={visibleSectionRef}
         onMouseDown={handleMouseDown}
         onTouchStart={handleMouseDown}
-        className={`bg-primary-foreground/30 z-20 absolute w-full touch-none ${
+        className={`bg-primary/30 z-20 absolute w-full touch-none ${
           isDragging ? "cursor-grabbing" : "cursor-grab"
         }`}
       ></div>

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

@@ -9,14 +9,13 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-secondary text-primary hover:bg-secondary/80",
         select: "bg-selected text-white hover:bg-opacity-90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
+        secondary: "bg-primary text-primary-foreground hover:bg-primary/90",
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
           "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
@@ -33,7 +32,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -52,7 +51,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

@@ -356,11 +356,10 @@ function Logs() {
           <Button
             className="flex justify-between items-center gap-2"
             size="sm"
-            variant="secondary"
             onClick={handleCopyLogs}
           >
             <FaCopy />
-            <div className="hidden md:block text-primary-foreground">
+            <div className="hidden md:block text-primary">
               Copy to Clipboard
             </div>
           </Button>
@@ -373,8 +372,7 @@ function Logs() {
 
       {initialScroll && !endVisible && (
         <Button
-          className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-md text-primary-foreground bg-secondary-foreground z-20 p-2"
+          className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-md text-primary bg-secondary-foreground z-20 p-2"
-          variant="secondary"
           onClick={() =>
             contentRef.current?.scrollTo({
               top: contentRef.current?.scrollHeight,
@@ -386,8 +384,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

@@ -237,9 +237,9 @@ function PlusFilterGroup({
         }}
       >
         <Trigger asChild>
-          <Button size="sm" className="mx-1 capitalize" variant="secondary">
+          <Button size="sm" className="mx-1 capitalize">
             <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`}
@@ -314,9 +314,9 @@ function PlusFilterGroup({
         }}
       >
         <Trigger asChild>
-          <Button size="sm" className="mx-1 capitalize" variant="secondary">
+          <Button size="sm" className="mx-1 capitalize">
             <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

@@ -254,11 +254,10 @@ export function RecordingView({
         <Button
           className="flex items-center gap-2 rounded-lg"
           size="sm"
-          variant="secondary"
           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

@@ -226,18 +226,14 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
               <Button
                 className={`flex items-center gap-2.5 rounded-lg`}
                 size="sm"
-                variant="secondary"
                 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"
                 size="sm"
-                variant="secondary"
                 onClick={() => {
                   navigate("events", {
                     state: {
@@ -252,9 +248,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 +516,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
@@ -349,7 +349,6 @@ export default function GeneralMetrics({
               {canGetGpuInfo && (
                 <Button
                   className="cursor-pointer"
-                  variant="secondary"
                   size="sm"
                   onClick={() => setShowVainfo(true)}
                 >
@@ -359,7 +358,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 +376,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 +402,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 +420,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 17.4% 36.2%);
-    --secondary-foreground: 0 0% 70%;
+    --secondary-foreground: 222.2 17.4% 36.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,11 +115,11 @@
     --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: hsl(0, 0%, 9%);
-    --primary-foreground: 0 0% 100%;
+    --primary-foreground: 0 0% 9%;
 
     --secondary: hsl(0, 0%, 15%);
     --secondary: 0 0% 15%;