@commonpub/layer 0.67.0 → 0.68.0

package/components/admin/theme/studio/AdminThemeStudio.vue

@@ -273,7 +273,7 @@ function finishWith(apply: boolean): void {
 
         <template v-else>
           <label class="cpub-studio-field">
-            <span class="cpub-studio-lbl">Mode</span>
+            <span class="cpub-studio-lbl">Default mode <span class="cpub-studio-hint">both are saved</span></span>
             <span class="cpub-studio-seg">
               <button type="button" :class="{ on: recipe.mode === 'light' }" @click="recipe.mode = 'light'">Light</button>
               <button type="button" :class="{ on: recipe.mode === 'dark' }" @click="recipe.mode = 'dark'">Dark</button>

package/composables/useTheme.ts

@@ -29,6 +29,7 @@ export function useTheme(): {
   const themeId = useState<string>('cpub-theme', () => 'base');
   const instanceDefault = useState<string>('cpub-instance-theme', () => 'base');
   const isDark = useState<boolean>('cpub-dark-mode', () => false);
+  const themePair = useState<{ lightAttr: string; darkAttr: string } | null>('cpub-theme-pair', () => null);
   const schemeCookie = useCookie('cpub-color-scheme', {
     maxAge: 31536000,
     path: '/',
@@ -44,9 +45,21 @@ export function useTheme(): {
       schemeCookie.value = dark ? 'dark' : 'light';
     }
 
+    // Custom light/dark PAIR: both variants' tokens are injected (scoped to
+    // their data-theme attr), so flip the attribute client-side for an instant
+    // switch — exactly like built-in families. (This is the fix for "the site
+    // light/dark toggle didn't switch a custom theme".)
+    if (themePair.value) {
+      const newTheme = dark ? themePair.value.darkAttr : themePair.value.lightAttr;
+      themeId.value = newTheme;
+      if (import.meta.client) {
+        document.documentElement.setAttribute('data-theme', newTheme);
+        $fetch('/api/profile/theme', { method: 'PUT', body: { themeId: newTheme } }).catch(() => {});
+      }
+      return;
+    }
+
     // Built-in family flip is purely client-side for snappy UX.
-    // Custom/registered themes need a server round-trip on next nav
-    // (the server reads the new cookie and picks the right pair).
     if (THEME_TO_FAMILY[instanceDefault.value]) {
       const family = THEME_TO_FAMILY[instanceDefault.value]!;
       const variants = FAMILY_VARIANTS[family] ?? FAMILY_VARIANTS.classic!;
@@ -61,7 +74,8 @@ export function useTheme(): {
         }).catch(() => {});
       }
     } else if (import.meta.client) {
-      // Custom theme: just persist preference; server will pick the variant on next request
+      // Single custom / registered theme with no pair: persist preference only;
+      // the server picks any declared variant on the next request.
       $fetch('/api/profile/theme', {
         method: 'PUT',
         body: { themeId: instanceDefault.value },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.67.0",
+  "version": "0.68.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,15 +55,15 @@
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
     "@commonpub/config": "0.20.0",
-    "@commonpub/editor": "0.7.11",
-    "@commonpub/explainer": "0.7.15",
     "@commonpub/docs": "0.6.3",
+    "@commonpub/explainer": "0.7.15",
+    "@commonpub/editor": "0.7.11",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/schema": "0.37.0",
     "@commonpub/protocol": "0.13.0",
-    "@commonpub/ui": "0.12.0",
     "@commonpub/server": "2.83.0",
-    "@commonpub/theme-studio": "0.3.0",
-    "@commonpub/learning": "0.5.2"
+    "@commonpub/ui": "0.12.0",
+    "@commonpub/theme-studio": "0.3.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/admin/theme/edit/[id].vue

@@ -465,7 +465,10 @@ onBeforeUnmount(() => {
           </select>
         </label>
 
-        <label class="theme-editor-field theme-editor-field-toggle">
+        <!-- Mode pill only for hand-authored themes. Studio themes are a managed
+             light+dark pair — there's no single "mode" to pick, and the site's
+             Light/Dark toggle switches the pair for visitors. -->
+        <label v-if="!draft.recipe" class="theme-editor-field theme-editor-field-toggle">
           <span class="theme-editor-field-label">Mode</span>
           <div class="theme-editor-mode-pill" role="group">
             <button
@@ -483,7 +486,7 @@ onBeforeUnmount(() => {
           </div>
         </label>
 
-        <label v-if="pairCandidates.length" class="theme-editor-field">
+        <label v-if="!draft.recipe && pairCandidates.length" class="theme-editor-field">
           <span class="theme-editor-field-label">Pair with</span>
           <select v-model="draft.pairId" class="theme-editor-input" @change="onMetaChange">
             <option :value="undefined">- none -</option>
@@ -566,7 +569,9 @@ onBeforeUnmount(() => {
       <section v-else class="theme-editor-tokens" aria-label="Token editor">
         <p v-if="draft.recipe" class="theme-editor-studio-hint">
           <i class="fa-solid fa-circle-info" aria-hidden="true" />
-          This theme was built with Studio. Re-opening Studio and changing it overwrites manual token tweaks here.
+          This theme is a light + dark pair (one card in the picker). Visitors switch between them
+          with the site's Light/Dark toggle. Re-opening Studio and changing it overwrites manual
+          token tweaks here.
         </p>
         <AdminThemeTokenGroup
           v-for="group in TOKEN_GROUP_ORDER"

package/plugins/theme.ts

@@ -11,6 +11,9 @@ export default defineNuxtPlugin(() => {
   const isDark = useState<boolean>('cpub-dark-mode', () => false);
   const themeInlineCss = useState<string>('cpub-theme-inline-css', () => '');
   const themeFontHref = useState<string>('cpub-theme-font-href', () => '');
+  // Light/dark attrs of a custom pair — lets the user toggle flip data-theme
+  // instantly client-side (both variants' tokens are injected below).
+  const themePair = useState<{ lightAttr: string; darkAttr: string } | null>('cpub-theme-pair', () => null);
 
   if (import.meta.server) {
     const event = useRequestEvent();
@@ -20,6 +23,7 @@ export default defineNuxtPlugin(() => {
       isDark.value = event.context.isDarkMode ?? false;
       themeInlineCss.value = event.context.themeInlineCss ?? '';
       themeFontHref.value = event.context.themeFontHref ?? '';
+      themePair.value = event.context.themePair ?? null;
     }
   }
 

package/server/middleware/theme.ts

@@ -16,6 +16,8 @@ declare module 'h3' {
     themeInlineCss: string;
     /** Google Fonts stylesheet URL for the active custom theme's fonts. Empty if none. */
     themeFontHref: string;
+    /** Light/dark data-theme attrs of a custom pair (for the client toggle). */
+    themePair: { lightAttr: string; darkAttr: string } | null;
   }
 }
 
@@ -40,14 +42,25 @@ export default defineEventHandler(async (event) => {
   event.context.resolvedTheme = ctx.resolvedTheme;
   event.context.isDarkMode = ctx.isDark;
 
-  // Build the inline style block. We scope tokens to `:root` so they
-  // override the loaded theme CSS but lose to inline element styles.
-  // Token overrides are added last (already merged into injectedTokens
-  // in resolveThemeContext) so they win.
-  event.context.themeInlineCss = Object.keys(ctx.injectedTokens).length > 0
-    ? tokensToCss(':root', ctx.injectedTokens)
-    : '';
+  // Build the inline style block.
+  //  - Custom theme(s): one block per variant, scoped to its `[data-theme]`
+  //    attr, with instance overrides merged in (so overrides win + apply in
+  //    every mode). A light/dark PAIR injects BOTH, so the client toggle can
+  //    flip `data-theme` and switch instantly — no server round-trip.
+  //  - Built-in / registered: only instance overrides at `:root` (their CSS
+  //    files already handle light/dark).
+  if (ctx.themeVariants.length > 0) {
+    event.context.themeInlineCss = ctx.themeVariants
+      .map((v) => tokensToCss(`:root[data-theme="${v.attr}"]`, { ...v.tokens, ...ctx.overrides }))
+      .filter(Boolean)
+      .join('\n');
+  } else {
+    event.context.themeInlineCss = Object.keys(ctx.overrides).length > 0
+      ? tokensToCss(':root', ctx.overrides)
+      : '';
+  }
 
   // Google Fonts for the active custom theme (CSP already allows googleapis).
   event.context.themeFontHref = ctx.fontHref;
+  event.context.themePair = ctx.pair;
 });

package/server/utils/instanceTheme.ts

@@ -104,9 +104,18 @@ export async function resolveThemeContext(
   instanceTheme: string;
   /** Whether the resolved theme is dark */
   isDark: boolean;
-  /** Token map to inject as inline :root style (custom theme tokens + overrides). Empty when not needed. */
-  injectedTokens: Record<string, string>;
-  /** Google Fonts stylesheet URL for the active custom theme's fonts. Empty when none. */
+  /**
+   * Custom-theme token blocks to inject, one per variant, each scoped to its
+   * own `[data-theme]` selector. For a light/dark PAIR this is BOTH variants,
+   * so the client can flip `data-theme` and switch instantly (no round-trip).
+   * Empty for built-in / registered themes (their CSS files handle modes).
+   */
+  themeVariants: Array<{ attr: string; tokens: Record<string, string> }>;
+  /** Instance-wide token overrides (apply in every mode). */
+  overrides: Record<string, string>;
+  /** Light/dark attrs of a custom pair, so the client toggle can flip instantly. */
+  pair: { lightAttr: string; darkAttr: string } | null;
+  /** Google Fonts stylesheet URL for the active custom theme(s) fonts. Empty when none. */
   fontHref: string;
 }> {
   const state = await getState();
@@ -114,61 +123,52 @@ export async function resolveThemeContext(
   // Validate the admin's choice — fall back to base if missing/unknown
   const admin = isKnownThemeId(state.defaultTheme, state, registeredIds) ? state.defaultTheme : 'base';
 
-  // Light/dark resolution. We only flip variants for built-in family pairs;
-  // custom themes use their declared pair if present, otherwise stay put.
+  const activeCustom = state.customByAttr.get(admin);
   let resolved = admin;
-  if (userScheme !== null) {
-    // Built-in family flip
-    if (VALID_THEME_IDS.has(admin)) {
+  let isDark = false;
+  let themeVariants: Array<{ attr: string; tokens: Record<string, string> }> = [];
+  let pair: { lightAttr: string; darkAttr: string } | null = null;
+  let fontHref = '';
+
+  if (activeCustom) {
+    // Gather the pair members (the default + its sibling, if both exist).
+    const members: Array<{ attr: string; rec: CustomThemeRecord }> = [{ attr: admin, rec: activeCustom }];
+    if (activeCustom.pairId) {
+      const sibAttr = `cpub-custom-${activeCustom.pairId}`;
+      const sib = state.customByAttr.get(sibAttr);
+      if (sib) members.push({ attr: sibAttr, rec: sib });
+    }
+    themeVariants = members.map((m) => ({ attr: m.attr, tokens: m.rec.tokens }));
+    const lightM = members.find((m) => !m.rec.isDark);
+    const darkM = members.find((m) => m.rec.isDark);
+    if (members.length === 2 && lightM && darkM) {
+      pair = { lightAttr: lightM.attr, darkAttr: darkM.attr };
+    }
+    // <html data-theme> = the variant matching the user's scheme (else the default).
+    if (userScheme === 'dark' && darkM) resolved = darkM.attr;
+    else if (userScheme === 'light' && lightM) resolved = lightM.attr;
+    else resolved = admin;
+    isDark = state.customByAttr.get(resolved)?.isDark ?? activeCustom.isDark;
+    // Load every variant's fonts so a client-side flip already has them.
+    const allFonts = [...new Set(members.flatMap((m) => m.rec.fonts ?? []))];
+    fontHref = allFonts.length ? googleHref(allFonts) : '';
+  } else {
+    // Built-in / registered: flip via the family's CSS variants on round-trip.
+    if (userScheme !== null && VALID_THEME_IDS.has(admin)) {
       const family = THEME_TO_FAMILY[admin] ?? 'classic';
       const variants = FAMILY_VARIANTS[family] ?? FAMILY_VARIANTS.classic!;
       resolved = userScheme === 'dark' ? variants.dark : variants.light;
-    } else {
-      // Custom theme — use pairId if defined
-      const custom = state.customByAttr.get(admin);
-      if (custom?.pairId) {
-        const pairAttr = `cpub-custom-${custom.pairId}`;
-        const pair = state.customByAttr.get(pairAttr);
-        if (pair && pair.isDark === (userScheme === 'dark')) {
-          resolved = pairAttr;
-        } else if (custom.isDark === (userScheme === 'dark')) {
-          resolved = admin;
-        }
-      }
-      // For registered themes (no pair info available server-side), we leave it alone
-      // — the layer-app author can declare a pair via the future RegisteredTheme.pairId
     }
-  }
-
-  // isDark detection
-  let isDark = false;
-  if (VALID_THEME_IDS.has(resolved)) {
     isDark = IS_DARK[resolved] ?? false;
-  } else {
-    const custom = state.customByAttr.get(resolved);
-    if (custom) isDark = custom.isDark;
   }
 
-  // Tokens to inject inline. Built-in themes don't need injection (their
-  // CSS files are already loaded). Custom themes always inject. Token
-  // overrides apply on top of whatever theme is active.
-  const injectedTokens: Record<string, string> = {};
-  const activeCustom = state.customByAttr.get(resolved);
-  if (activeCustom) {
-    Object.assign(injectedTokens, activeCustom.tokens);
-  }
-  // Instance overrides always last so they win
-  Object.assign(injectedTokens, state.tokenOverrides);
-
-  // Google Fonts for the active custom theme (theme-studio sets `fonts`).
-  const fontHref =
-    activeCustom?.fonts && activeCustom.fonts.length > 0 ? googleHref(activeCustom.fonts) : '';
-
   return {
     resolvedTheme: resolved,
     instanceTheme: admin,
     isDark,
-    injectedTokens,
+    themeVariants,
+    overrides: { ...state.tokenOverrides },
+    pair,
     fontHref,
   };
 }