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
2024-11-21 19:07:46 +01:00 · 2024-04-09 17:49:14 -05:00 · 2024-04-09 17:49:14 -05:00 · ef52a1d6f0
commit ef52a1d6f0
parent c08a198354
34 changed files with 144 additions and 154 deletions
--- a/web/src/components/Statusbar.tsx
+++ b/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">
--- a/web/src/components/dynamic/NewReviewData.tsx
+++ b/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) {
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/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")}
          >
--- a/web/src/components/filter/FilterCheckBox.tsx
+++ b/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)}
    >
--- a/web/src/components/filter/LogLevelFilter.tsx
+++ b/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("_", " ")}
--- a/web/src/components/filter/ReviewActionGroup.tsx
+++ b/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 && (
-            <div className="text-primary-foreground">Mark as reviewed</div>
-          )}
+          {isDesktop && <div className="text-primary">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>
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/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">
-      <FaFilter className="text-secondary-foreground" />
-      <div className="hidden md:block text-primary-foreground">Filter</div>
+    <Button
+      size="sm"
+      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>
--- a/web/src/components/graph/SystemGraph.tsx
+++ b/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">
-            {getUnitSize(used)}
-          </div>
-          <div className="text-xs text-primary-foreground">/</div>
+          <div className="text-xs text-primary">{getUnitSize(used)}</div>
+          <div className="text-xs text-primary">/</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>
--- a/web/src/components/indicators/Chip.tsx
+++ b/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":
--- a/web/src/components/navigation/Sidebar.tsx
+++ b/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" />
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/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"}
-            variant={startOpen ? "select" : "secondary"}
+            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+            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"}
-            variant={endOpen ? "select" : "secondary"}
+            className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+            variant={endOpen ? "select" : "default"}
            size="sm"
            onClick={() => {
              setEndOpen(true);
--- a/web/src/components/overlay/LogInfoDialog.tsx
+++ b/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">
-                Timestamp
-              </div>
+              <div className="text-sm text-primary/40">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">
-                  Helpful Links
-                </div>
+                <div className="text-sm text-primary/40">Helpful Links</div>
                {helpfulLinks.map((tip) => (
                  <Link to={tip.link} target="_blank" rel="noopener noreferrer">
                    <div className="text-sm text-selected hover:underline">
--- a/web/src/components/overlay/MobileCameraDrawer.tsx
+++ b/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>
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/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">
--- a/web/src/components/overlay/MobileTimelineDrawer.tsx
+++ b/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>
--- a/web/src/components/overlay/SaveExportOverlay.tsx
+++ b/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 />
--- a/web/src/components/overlay/VainfoDialog.tsx
+++ b/web/src/components/overlay/VainfoDialog.tsx
@ -44,9 +44,7 @@ export default function VainfoDialog({
          <ActivityIndicator />
        )}
        <DialogFooter>
-          <Button variant="secondary" onClick={() => setShowVainfo(false)}>
-            Close
-          </Button>
+          <Button onClick={() => setShowVainfo(false)}>Close</Button>
          <Button variant="select" onClick={() => onCopyVainfo()}>
            Copy
          </Button>
--- a/web/src/components/player/VideoControls.tsx
+++ b/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 && (
--- a/web/src/components/timeline/SummaryTimeline.tsx
+++ b/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>
--- a/web/src/components/timeline/segment-metadata.tsx
+++ b/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",
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+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 };
--- a/web/src/components/ui/button.tsx
+++ b/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:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        secondary: "bg-primary text-primary-foreground hover:bg-primary/90",
        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";

--- a/web/src/components/ui/sonner.tsx
+++ b/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:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary",
          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}
--- a/web/src/pages/Logs.tsx
+++ b/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"
-          variant="secondary"
+          className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-md text-primary bg-secondary-foreground z-20 p-2"
          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="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:px-2 *:py-3 *:text-sm *:text-primary-foreground/40">
+      <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/40">
          <div className="p-1 flex items-center capitalize">Type</div>
          <div className="col-span-2 sm:col-span-1 flex items-center">
            Timestamp
--- a/web/src/pages/SubmitPlus.tsx
+++ b/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`}
--- a/web/src/pages/UIPlayground.tsx
+++ b/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
--- a/web/src/views/events/RecordingView.tsx
+++ b/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
--- a/web/src/views/live/LiveBirdseyeView.tsx
+++ b/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 />
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/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 && (
-                  <div className="text-primary-foreground">Back</div>
-                )}
+                {isDesktop && <div className="text-primary">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 && (
-                  <div className="text-primary-foreground">History</div>
-                )}
+                {isDesktop && <div className="text-primary">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 />
--- a/web/src/views/system/CameraMetrics.tsx
+++ b/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`}
--- a/web/src/views/system/GeneralMetrics.tsx
+++ b/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
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/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`}
--- a/web/tailwind.config.js
+++ b/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: {
--- a/web/themes/theme-default.css
+++ b/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: 0 0% 100%;
+    --primary: hsl(222.2, 37.4%, 11.2%);
+    --primary: 222.2 47.4% 11.2%;

-    --primary-foreground: hsl(0, 0%, 0%);
-    --primary-foreground: 0 0% 0%;
+    --primary-foreground: hsl(210 40% 98%);
+    --primary-foreground: 210 40% 98%;

-    --secondary: hsl(0, 0%, 96%);
-    --secondary: 0 0% 96%;
+    --secondary: hsl(210 20% 94.1%);
+    --secondary: 210 20% 94.1%;

-    --secondary-foreground: hsl(0, 0%, 70%);
-    --secondary-foreground: 0 0% 70%;
+    --secondary-foreground: hsl(222.2 17.4% 36.2%);
+    --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: 0, 0%, 64%;
+    --muted-foreground: hsl(215.4 6.3% 46.9%);
+    --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: 0 0% 9%;
+    --primary: hsl(0, 0%, 91%);
+    --primary: 0 0% 91%;

-    --primary-foreground: hsl(0, 0%, 100%);
-    --primary-foreground: 0 0% 100%;
+    --primary-foreground: hsl(0, 0%, 9%);
+    --primary-foreground: 0 0% 9%;

    --secondary: hsl(0, 0%, 15%);
    --secondary: 0 0% 15%;