fix: force colors are really hard, for real

Author: abbeyperini

app/components/Settings/Toggle.client.vue

@@ -106,12 +106,14 @@ const id = useId()
 /* Track transition */
 .toggle {
   transition:
-    background-color 100ms ease-in,
-    border-color 100ms ease-in;
+    background-color 100ms ease-in-out,
+    border-color 100ms ease-in-out;
 }
 
 .toggle::before {
-  transition: translate 200ms ease-in-out;
+  transition:
+    background-color 50ms ease-in-out,
+    translate 200ms ease-in-out;
 }
 
 /* Hover states */
@@ -144,33 +146,20 @@ const id = useId()
 @media (forced-colors: active) {
   label > span {
     background: Canvas;
-    color: var(--fg);
+    color: Highlight;
     forced-color-adjust: none;
   }
 
   label:has(.toggle:checked) > span {
     background: Highlight;
-    color: var(--bg);
+    color: Canvas;
   }
 
   .toggle::before {
     forced-color-adjust: none;
     background-color: Highlight;
   }
 
-  @media (prefers-color-scheme: dark) {
-    label > span {
-      background: Canvas;
-      color: var(--bg);
-      forced-color-adjust: none;
-    }
-
-    label:has(.toggle:checked) > span {
-      background: Highlight;
-      color: var(--fg);
-    }
-  }
-
   .toggle,
   .toggle:hover {
     background: Canvas;
@@ -180,7 +169,7 @@ const id = useId()
   .toggle:checked,
   .toggle:checked:hover {
     background: Highlight;
-    border-color: HighlightText;
+    border-color: CanvasText;
   }
 
   .toggle:checked::before {

app/components/Settings/Toggle.server.vue

@@ -61,12 +61,14 @@ const props = withDefaults(
 /* Track transition */
 .toggle {
   transition:
-    background-color 100ms ease-in,
-    border-color 100ms ease-in;
+    background-color 100ms ease-in-out,
+    border-color 100ms ease-in-out;
 }
 
 .toggle::before {
-  transition: translate 200ms ease-in-out;
+  transition:
+    background-color 50ms ease-in-out,
+    translate 200ms ease-in-out;
 }
 
 /* Hover states */
@@ -99,33 +101,20 @@ const props = withDefaults(
 @media (forced-colors: active) {
   label > span {
     background: Canvas;
-    color: var(--fg);
+    color: Highlight;
     forced-color-adjust: none;
   }
 
   label:has(.toggle:checked) > span {
     background: Highlight;
-    color: var(--bg);
+    color: Canvas;
   }
 
   .toggle::before {
     forced-color-adjust: none;
     background-color: Highlight;
   }
 
-  @media (prefers-color-scheme: dark) {
-    label > span {
-      background: Canvas;
-      color: var(--bg);
-      forced-color-adjust: none;
-    }
-
-    label:has(.toggle:checked) > span {
-      background: Highlight;
-      color: var(--fg);
-    }
-  }
-
   .toggle,
   .toggle:hover {
     background: Canvas;
@@ -135,7 +124,7 @@ const props = withDefaults(
   .toggle:checked,
   .toggle:checked:hover {
     background: Highlight;
-    border-color: HighlightText;
+    border-color: CanvasText;
   }
 
   .toggle:checked::before {