@webjsdev/cli 0.9.0 → 0.9.1

package/lib/create.js

@@ -642,10 +642,21 @@ export default function RootLayout({ children }: { children: unknown }) {
     <script>
       (function(){
         try {
-          var t = localStorage.getItem('webjs_theme');
-          if (t === 'light' || t === 'dark') {
-            document.documentElement.dataset.theme = t;
+          var mq = window.matchMedia('(prefers-color-scheme: light)');
+          function apply(){
+            var t = null;
+            try { t = localStorage.getItem('webjs_theme'); } catch (_) {}
+            var el = document.documentElement;
+            if (t === 'light' || t === 'dark') el.dataset.theme = t;
+            else delete el.dataset.theme;
+            // Keep shadcn's .dark class in sync with the effective theme so the
+            // copied ui-* components (button, card, etc.) follow light/dark too.
+            // Dark is the default unless the OS prefers light or 'light' is set.
+            var dark = t === 'dark' || (t !== 'light' && !mq.matches);
+            el.classList.toggle('dark', dark);
           }
+          apply();
+          mq.addEventListener('change', apply);
         } catch (_) {}
       })();
     </script>
@@ -874,8 +885,13 @@ export class ThemeToggle extends WebComponent {
       if (next === 'system') localStorage.removeItem('webjs_theme');
       else localStorage.setItem('webjs_theme', next);
     } catch {}
-    if (next === 'system') delete document.documentElement.dataset.theme;
-    else document.documentElement.dataset.theme = next;
+    const el = document.documentElement;
+    if (next === 'system') delete el.dataset.theme;
+    else el.dataset.theme = next;
+    // Keep shadcn's .dark class in sync so the ui-* components follow the theme.
+    const dark = next === 'dark'
+      || (next === 'system' && !window.matchMedia('(prefers-color-scheme: light)').matches);
+    el.classList.toggle('dark', dark);
   }
 
   render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/cli",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "type": "module",
   "description": "webjs CLI - dev, start, create, db",
   "bin": {

package/templates/CONVENTIONS.md

@@ -568,6 +568,17 @@ or a build-step pipeline. The framework has no hard dependency on Tailwind.
 If you mix custom CSS into a light-DOM component, apply the class-prefix
 rule (see Components section above).
 
+**Dark mode uses two signals; a theme switch must set both.** The editorial
+chrome tokens (`--fg`, `--bg`, `--accent`) follow a `data-theme` attribute on
+`<html>`; the Webjs UI kit under `components/ui/` follows a `.dark` class
+(`@custom-variant dark (&:is(.dark *))`). The scaffold's head init script and
+`theme-toggle` set **both** (`data-theme` AND
+`classList.toggle('dark', isDark)`). If you replace the toggle or build your
+own theme switch, set both, or the `components/ui/*` render light tokens on a
+dark page (white buttons and cards, invisible text) while the chrome looks
+correct. Light mode hides this (both systems default to light), so **verify
+dark mode in a browser, not just light.**
+
 ---
 
 ## Styling alternative: vanilla CSS end-to-end