fix: forced contrast colors are hard

abbeyperini · abbeyperini · commit 61a0040c6ec2 · 2026-02-11T12:49:21.000-05:00
diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
@@ -144,33 +144,30 @@ const id = useId()
 @media (forced-colors: active) {
   label > span {
     background: Canvas;
-    color: var(--bg);
+    color: var(--fg);
     forced-color-adjust: none;
   }
 
   label:has(.toggle:checked) > span {
     background: Highlight;
-    color: var(--fg);
+    color: var(--bg);
   }
 
   .toggle::before {
     forced-color-adjust: none;
+    background-color: Highlight;
   }
 
   @media (prefers-color-scheme: dark) {
-    .toggle::before {
-      background-color: Highlight;
-    }
-
     label > span {
       background: Canvas;
-      color: var(--fg);
+      color: var(--bg);
       forced-color-adjust: none;
     }
 
     label:has(.toggle:checked) > span {
       background: Highlight;
-      color: var(--bg);
+      color: var(--fg);
     }
   }
 
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
@@ -99,33 +99,30 @@ const props = withDefaults(
 @media (forced-colors: active) {
   label > span {
     background: Canvas;
-    color: var(--bg);
+    color: var(--fg);
     forced-color-adjust: none;
   }
 
   label:has(.toggle:checked) > span {
     background: Highlight;
-    color: var(--fg);
+    color: var(--bg);
   }
 
   .toggle::before {
     forced-color-adjust: none;
+    background-color: Highlight;
   }
 
   @media (prefers-color-scheme: dark) {
-    .toggle::before {
-      background-color: Highlight;
-    }
-
     label > span {
       background: Canvas;
-      color: var(--fg);
+      color: var(--bg);
       forced-color-adjust: none;
     }
 
     label:has(.toggle:checked) > span {
       background: Highlight;
-      color: var(--bg);
+      color: var(--fg);
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -144,33 +144,30 @@ const id = useId()`
`144`	`144`	`@media (forced-colors: active) {`
`145`	`145`	`label > span {`
`146`	`146`	`background: Canvas;`
`147`		`- color: var(--bg);`
	`147`	`+ color: var(--fg);`
`148`	`148`	`forced-color-adjust: none;`
`149`	`149`	`}`
`150`	`150`
`151`	`151`	`label:has(.toggle:checked) > span {`
`152`	`152`	`background: Highlight;`
`153`		`- color: var(--fg);`
	`153`	`+ color: var(--bg);`
`154`	`154`	`}`
`155`	`155`
`156`	`156`	`.toggle::before {`
`157`	`157`	`forced-color-adjust: none;`
	`158`	`+ background-color: Highlight;`
`158`	`159`	`}`
`159`	`160`
`160`	`161`	`@media (prefers-color-scheme: dark) {`
`161`		`- .toggle::before {`
`162`		`- background-color: Highlight;`
`163`		`- }`
`164`		`-`
`165`	`162`	`label > span {`
`166`	`163`	`background: Canvas;`
`167`		`- color: var(--fg);`
	`164`	`+ color: var(--bg);`
`168`	`165`	`forced-color-adjust: none;`
`169`	`166`	`}`
`170`	`167`
`171`	`168`	`label:has(.toggle:checked) > span {`
`172`	`169`	`background: Highlight;`
`173`		`- color: var(--bg);`
	`170`	`+ color: var(--fg);`
`174`	`171`	`}`
`175`	`172`	`}`
`176`	`173`
Original file line number	Diff line number	Diff line change
`@@ -99,33 +99,30 @@ const props = withDefaults(`
`99`	`99`	`@media (forced-colors: active) {`
`100`	`100`	`label > span {`
`101`	`101`	`background: Canvas;`
`102`		`- color: var(--bg);`
	`102`	`+ color: var(--fg);`
`103`	`103`	`forced-color-adjust: none;`
`104`	`104`	`}`
`105`	`105`
`106`	`106`	`label:has(.toggle:checked) > span {`
`107`	`107`	`background: Highlight;`
`108`		`- color: var(--fg);`
	`108`	`+ color: var(--bg);`
`109`	`109`	`}`
`110`	`110`
`111`	`111`	`.toggle::before {`
`112`	`112`	`forced-color-adjust: none;`
	`113`	`+ background-color: Highlight;`
`113`	`114`	`}`
`114`	`115`
`115`	`116`	`@media (prefers-color-scheme: dark) {`
`116`		`- .toggle::before {`
`117`		`- background-color: Highlight;`
`118`		`- }`
`119`		`-`
`120`	`117`	`label > span {`
`121`	`118`	`background: Canvas;`
`122`		`- color: var(--fg);`
	`119`	`+ color: var(--bg);`
`123`	`120`	`forced-color-adjust: none;`
`124`	`121`	`}`
`125`	`122`
`126`	`123`	`label:has(.toggle:checked) > span {`
`127`	`124`	`background: Highlight;`
`128`		`- color: var(--bg);`
	`125`	`+ color: var(--fg);`
`129`	`126`	`}`
`130`	`127`	`}`
`131`	`128`