fix(ui): improve dark-mode contrast for off-state toggles (#5825)

* fix(ui): improve dark-mode contrast for off-state toggles

The default off-state track uses --border-strong (#c9d0da light / #46433c dark).
In dark mode #46433c is only ~5% lighter than the --bg-subtle (#252321) panel
behind it, making the toggle nearly invisible when off and users unsure of the
control state.

Bump the off-state track to #6b6862 with a subtle inset border, and add a
thin outline to the white thumb so it stays visible against the (now lighter)
track. On-state already uses --text (#e8e4dc) and is left unchanged.

Applies to both .toggle-row (used by speaker-notes toggle in the deck tab)
and .compact-toggle (used by SurfaceOptions toggles). Hover lift gives an
additional interactive affordance.

Fixes #5298

* fix(ui): fix two dark-mode toggle blocking issues from review

Two correctness issues called out by mrcfps:

1. System dark theme never gets the contrast fix — the default "system"
   theme mode removes [data-theme] and falls back to
   @media prefers-color-scheme. Added a parallel block scoped to
   html:not([data-theme]) inside @media (prefers-color-scheme: dark).

2. Hover override wins over on-state — .compact-toggle:hover and
   .toggle-row:hover have higher specificity than .on
   variants, so hovering an ON toggle dropped its track from bright
   var(--text) to #75726c. Changed to :not(.on):hover so the hover
   lift only applies when off, leaving the on-state always bright.

Both applied to both selector paths (explicit data-theme and system dark).

Author: xxiaoxiong

apps/web/src/styles/workspace/artifacts.css

@@ -3426,6 +3426,58 @@
 .compact-toggle.on .compact-toggle-switch { background: var(--text); }
 .compact-toggle.on .compact-toggle-switch::after { transform: translateX(12px); }
 
+/* Dark-mode visibility for off-state toggles (#5298).
+   The default off-state track uses --border-strong, which in dark mode is
+   #46433c — only ~5% lighter than the --bg-subtle (#252321) panel behind it.
+   That makes the toggle track nearly invisible when the control is off,
+   leaving users unsure whether the setting is enabled. Bump the off-state
+   track to a clearly lighter neutral and outline the thumb so the white
+   knob stays visible against the (now lighter) track. On-state already
+   used --text (#e8e4dc) which is high-contrast, so it is left alone.
+
+   Two selector paths needed because Open Design supports both explicit
+   [data-theme='dark'] AND system dark via @media prefers-color-scheme
+   (the default "system" theme removes data-theme and falls back on the
+   media query in tokens.css). */
+
+/* --- Explicit dark theme --- */
+[data-theme='dark'] .toggle-row-switch,
+[data-theme='dark'] .compact-toggle-switch {
+  background: #6b6862;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
+}
+[data-theme='dark'] .toggle-row-switch::after,
+[data-theme='dark'] .compact-toggle-switch::after {
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(0, 0, 0, 0.18);
+}
+/* Hover: only lift the track when off, or the on-state bright track gets
+   overridden by a higher-specificity hover rule. */
+[data-theme='dark'] .compact-toggle:not(.on):hover .compact-toggle-switch,
+[data-theme='dark'] .toggle-row:not(.on):hover .toggle-row-switch {
+  background: #75726c;
+}
+
+/* --- System dark theme (the default — no data-theme attr set) --- */
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) .toggle-row-switch,
+  html:not([data-theme]) .compact-toggle-switch {
+    background: #6b6862;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
+  }
+  html:not([data-theme]) .toggle-row-switch::after,
+  html:not([data-theme]) .compact-toggle-switch::after {
+    box-shadow:
+      0 1px 2px rgba(0, 0, 0, 0.4),
+      0 0 0 1px rgba(0, 0, 0, 0.18);
+  }
+  html:not([data-theme]) .compact-toggle:not(.on):hover .compact-toggle-switch,
+  html:not([data-theme]) .toggle-row:not(.on):hover .toggle-row-switch {
+    background: #75726c;
+  }
+}
+
 /* -------- Template picker (template tab) ---------------------------- */
 .template-list {
   display: flex;