chore(ladle): drive global chrome theme from the theme switch (menu accent + active item)

rschlaefli · rschlaefli · commit 027566fc7c8f · 2026-06-16T18:03:39.000+02:00
diff --git a/packages/design-system/.ladle/components.tsx b/packages/design-system/.ladle/components.tsx
@@ -27,11 +27,18 @@ export const Provider: GlobalProvider = ({ children }) => {
     read<boolean>('ladle-dark', false)
   )
 
+  // Mirror the selection onto <body> as well. Ladle injects this Provider inside
+  // <main>, so the wrapping ThemeProvider below themes only the story; setting
+  // `data-theme` / `.dark` on <body> extends the DS theme context to the whole
+  // Ladle app (the component menu + toolbar chrome), so `var(--primary)` resolves
+  // per-theme globally and head.html can drive Ladle's own accent from it.
   React.useEffect(() => {
     window.localStorage.setItem('ladle-theme', JSON.stringify(theme))
+    document.body.setAttribute('data-theme', theme)
   }, [theme])
   React.useEffect(() => {
     window.localStorage.setItem('ladle-dark', JSON.stringify(dark))
+    document.body.classList.toggle('dark', dark)
   }, [dark])
 
   return (
diff --git a/packages/design-system/.ladle/head.html b/packages/design-system/.ladle/head.html
@@ -23,4 +23,18 @@
   * {
     font-family: var(--theme-font-primary);
   }
+
+  /* Drive Ladle's own chrome accent (active menu item, focus, links) from the
+     selected DS theme, so the theme switch is visible on the global view (the
+     component menu), not just inside a story. `data-theme` is mirrored onto
+     <body> by the Ladle Provider; `--primary` resolves per-theme there
+     (UZH blue under uzh, near-black under neutral). */
+  body[data-theme] {
+    --ladle-color-accent: var(--primary);
+  }
+  /* Also tint the active component in the menu (Ladle bolds it via
+     `.ladle-active a`) so the selected theme is obvious right in the list. */
+  .ladle-aside .ladle-active a {
+    color: var(--primary);
+  }
 </style>
