diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 0b0acdebd..04bd5b9be 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -229,7 +229,7 @@ function CamerasFilterButton({
       <FaVideo
         className={`${selectedCameras?.length ? "text-primary" : "text-secondary-foreground"}`}
       />
-      <div className="hidden md:block">
+      <div className="hidden md:block text-primary">
         {selectedCameras == undefined
           ? "All Cameras"
           : `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`}
@@ -397,7 +397,7 @@ function ShowReviewFilter({
         onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
       >
         <FaCheckCircle
-          className={`${showReviewedSwitch == 1 ? "fill-primary dark:fill-primary-foreground" : "text-muted-foreground"}`}
+          className={`${showReviewedSwitch == 1 ? "fill-primary" : "text-muted-foreground"}`}
         />
       </Button>
     </>
@@ -683,7 +683,7 @@ function ShowMotionOnlyButton({
           onClick={() => setMotionOnlyButton(!motionOnlyButton)}
         >
           <FaRunning
-            className={`${motionOnlyButton ? "fill-primary dark:fill-primary-foreground" : "text-muted-foreground"}`}
+            className={`${motionOnlyButton ? "fill-primary" : "text-muted-foreground"}`}
           />
         </Button>
       </div>
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index 411cd2372..39d2e67a7 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -137,7 +137,7 @@ export default function MobileReviewSettingsDrawer({
       <div className="w-full p-4 flex flex-col gap-2">
         {features.includes("export") && (
           <Button
-            className="w-full flex justify-center items-center gap-2 dark:text-primary-foreground"
+            className="w-full flex justify-center items-center gap-2"
             variant="secondary"
             onClick={() => setDrawerMode("export")}
           >
@@ -147,7 +147,7 @@ export default function MobileReviewSettingsDrawer({
         )}
         {features.includes("calendar") && (
           <Button
-            className="w-full flex justify-center items-center gap-2 dark:text-primary-foreground"
+            className="w-full flex justify-center items-center gap-2"
             variant="secondary"
             onClick={() => setDrawerMode("calendar")}
           >
@@ -157,7 +157,7 @@ export default function MobileReviewSettingsDrawer({
         )}
         {features.includes("filter") && (
           <Button
-            className="w-full flex justify-center items-center gap-2 dark:text-primary-foreground"
+            className="w-full flex justify-center items-center gap-2"
             variant="secondary"
             onClick={() => setDrawerMode("filter")}
           >
diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index 0422f023b..cbbabed4f 100644
--- 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 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-secondary-foreground/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 && (
diff --git a/web/src/components/timeline/SummaryTimeline.tsx b/web/src/components/timeline/SummaryTimeline.tsx
index f915cfca6..40684543c 100644
--- 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>
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index 63ac5da96..f4240b49a 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -373,7 +373,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({
diff --git a/web/themes/theme-default.css b/web/themes/theme-default.css
index 2f8ccf520..cc4026967 100644
--- a/web/themes/theme-default.css
+++ b/web/themes/theme-default.css
@@ -30,8 +30,8 @@
     --secondary: hsl(210 20% 94.1%);
     --secondary: 210 20% 94.1%;
 
-    --secondary-foreground: hsl(222.2 47.4% 21.2%);
-    --secondary-foreground: 222.2 47.4% 21.2%;
+    --secondary-foreground: hsl(222.2 17.4% 21.2%);
+    --secondary-foreground: 222.2 17.4% 21.2%;
 
     --secondary-highlight: hsl(0, 0%, 94%);
     --secondary-highlight: 0 0% 94%;
@@ -118,8 +118,8 @@
     --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%;