fix: forced contrast mode styling, server style tag

Author: abbeyperini

app/components/Settings/Toggle.client.vue

@@ -3,7 +3,7 @@ import TooltipApp from '~/components/Tooltip/App.vue'
 
 const props = withDefaults(
   defineProps<{
-    label?: string
+    label: string
     description?: string
     justify?: 'between' | 'start'
     tooltip?: string
@@ -139,4 +139,55 @@ const id = useId()
     transition: none;
   }
 }
+
+/* Support forced colors */
+@media (forced-colors: active) {
+  label > span {
+    background: Canvas;
+    color: var(--bg);
+    forced-color-adjust: none;
+  }
+
+  label:has(.toggle:checked) > span {
+    background: Highlight;
+    color: var(--fg);
+  }
+
+  .toggle::before {
+    forced-color-adjust: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .toggle::before {
+      background-color: Highlight;
+    }
+
+    label > span {
+      background: Canvas;
+      color: var(--fg);
+      forced-color-adjust: none;
+    }
+
+    label:has(.toggle:checked) > span {
+      background: Highlight;
+      color: var(--bg);
+    }
+  }
+
+  .toggle,
+  .toggle:hover {
+    background: Canvas;
+    border-color: CanvasText;
+  }
+
+  .toggle:checked,
+  .toggle:checked:hover {
+    background: Highlight;
+    border-color: HighlightText;
+  }
+
+  .toggle:checked::before {
+    background: Canvas;
+  }
+}
 </style>

app/components/Settings/Toggle.server.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    label?: string
+    label: string
     description?: string
     justify?: 'between' | 'start'
     reverseOrder?: boolean
@@ -51,3 +51,98 @@ const props = withDefaults(
     {{ description }}
   </p>
 </template>
+
+<style scoped>
+/* Thumb position: logical property for RTL support */
+.toggle::before {
+  inset-inline-start: 1px;
+}
+
+/* Track transition */
+.toggle {
+  transition:
+    background-color 100ms ease-in,
+    border-color 100ms ease-in;
+}
+
+.toggle::before {
+  transition: translate 200ms ease-in-out;
+}
+
+/* Hover states */
+.toggle:hover:not(:checked) {
+  background: var(--fg-muted);
+}
+
+.toggle:checked:hover {
+  background: var(--fg-muted);
+  border-color: var(--fg-muted);
+}
+
+/* RTL-aware checked thumb position */
+:dir(ltr) .toggle:checked::before {
+  translate: 20px;
+}
+
+:dir(rtl) .toggle:checked::before {
+  translate: -20px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle,
+  .toggle::before {
+    transition: none;
+  }
+}
+
+/* Support forced colors */
+@media (forced-colors: active) {
+  label > span {
+    background: Canvas;
+    color: var(--bg);
+    forced-color-adjust: none;
+  }
+
+  label:has(.toggle:checked) > span {
+    background: Highlight;
+    color: var(--fg);
+  }
+
+  .toggle::before {
+    forced-color-adjust: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .toggle::before {
+      background-color: Highlight;
+    }
+
+    label > span {
+      background: Canvas;
+      color: var(--fg);
+      forced-color-adjust: none;
+    }
+
+    label:has(.toggle:checked) > span {
+      background: Highlight;
+      color: var(--bg);
+    }
+  }
+
+  .toggle,
+  .toggle:hover {
+    background: Canvas;
+    border-color: CanvasText;
+  }
+
+  .toggle:checked,
+  .toggle:checked:hover {
+    background: Highlight;
+    border-color: HighlightText;
+  }
+
+  .toggle:checked::before {
+    background: Canvas;
+  }
+}
+</style>