@jskit-ai/users-web 0.1.17 → 0.1.20

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/users-web",
-  version: "0.1.17",
+  version: "0.1.20",
   description: "Users web module: workspace selector shell element plus workspace/profile/members UI elements.",
   dependsOn: [
     "@jskit-ai/http-runtime",
@@ -241,11 +241,11 @@ export default Object.freeze({
         "@uppy/dashboard": "^5.1.1",
         "@uppy/image-editor": "^4.2.0",
         "@uppy/xhr-upload": "^5.1.1",
-        "@jskit-ai/http-runtime": "0.1.8",
-        "@jskit-ai/realtime": "0.1.8",
-        "@jskit-ai/kernel": "0.1.8",
-        "@jskit-ai/shell-web": "0.1.8",
-        "@jskit-ai/users-core": "0.1.13",
+        "@jskit-ai/http-runtime": "0.1.11",
+        "@jskit-ai/realtime": "0.1.11",
+        "@jskit-ai/kernel": "0.1.11",
+        "@jskit-ai/shell-web": "0.1.11",
+        "@jskit-ai/users-core": "0.1.16",
         "vuetify": "^4.0.0"
       },
       dev: {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.1.17",
+  "version": "0.1.20",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -21,11 +21,11 @@
   "dependencies": {
     "@tanstack/vue-query": "5.92.12",
     "@mdi/js": "^7.4.47",
-    "@jskit-ai/users-core": "0.1.13",
-    "@jskit-ai/realtime": "0.1.8",
-    "@jskit-ai/http-runtime": "0.1.8",
-    "@jskit-ai/kernel": "0.1.8",
-    "@jskit-ai/shell-web": "0.1.8",
+    "@jskit-ai/users-core": "0.1.16",
+    "@jskit-ai/realtime": "0.1.11",
+    "@jskit-ai/http-runtime": "0.1.11",
+    "@jskit-ai/kernel": "0.1.11",
+    "@jskit-ai/shell-web": "0.1.11",
     "vuetify": "^4.0.0"
   }
 }

package/src/client/components/WorkspaceSettingsClientElement.vue

@@ -50,53 +50,127 @@
 
               <v-col cols="12">
                 <div class="text-subtitle-2 mb-2">Theme colors</div>
+                <v-row dense class="mb-2">
+                  <v-col cols="12">
+                    <div class="text-caption text-medium-emphasis mb-2">Light palette</div>
+                  </v-col>
+                  <v-col cols="12" md="3">
+                    <v-text-field
+                      v-model="workspaceForm.lightPrimaryColor"
+                      label="Primary"
+                      type="color"
+                      variant="outlined"
+                      density="comfortable"
+                      :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
+                      :error-messages="
+                        addEdit.fieldErrors.lightPrimaryColor ? [addEdit.fieldErrors.lightPrimaryColor] : []
+                      "
+                    />
+                  </v-col>
+
+                  <v-col cols="12" md="3">
+                    <v-text-field
+                      v-model="workspaceForm.lightSecondaryColor"
+                      label="Secondary"
+                      type="color"
+                      variant="outlined"
+                      density="comfortable"
+                      :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
+                      :error-messages="
+                        addEdit.fieldErrors.lightSecondaryColor ? [addEdit.fieldErrors.lightSecondaryColor] : []
+                      "
+                    />
+                  </v-col>
+
+                  <v-col cols="12" md="3">
+                    <v-text-field
+                      v-model="workspaceForm.lightSurfaceColor"
+                      label="Surface"
+                      type="color"
+                      variant="outlined"
+                      density="comfortable"
+                      :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
+                      :error-messages="
+                        addEdit.fieldErrors.lightSurfaceColor ? [addEdit.fieldErrors.lightSurfaceColor] : []
+                      "
+                    />
+                  </v-col>
+
+                  <v-col cols="12" md="3">
+                    <v-text-field
+                      v-model="workspaceForm.lightSurfaceVariantColor"
+                      label="Surface variant"
+                      type="color"
+                      variant="outlined"
+                      density="comfortable"
+                      :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
+                      :error-messages="
+                        addEdit.fieldErrors.lightSurfaceVariantColor
+                          ? [addEdit.fieldErrors.lightSurfaceVariantColor]
+                          : []
+                      "
+                    />
+                  </v-col>
+                </v-row>
+
                 <v-row dense>
+                  <v-col cols="12">
+                    <div class="text-caption text-medium-emphasis mb-2">Dark palette</div>
+                  </v-col>
                   <v-col cols="12" md="3">
                     <v-text-field
-                      v-model="workspaceForm.color"
+                      v-model="workspaceForm.darkPrimaryColor"
                       label="Primary"
                       type="color"
                       variant="outlined"
                       density="comfortable"
                       :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                      :error-messages="addEdit.fieldErrors.color ? [addEdit.fieldErrors.color] : []"
+                      :error-messages="
+                        addEdit.fieldErrors.darkPrimaryColor ? [addEdit.fieldErrors.darkPrimaryColor] : []
+                      "
                     />
                   </v-col>
 
                   <v-col cols="12" md="3">
                     <v-text-field
-                      v-model="workspaceForm.secondaryColor"
+                      v-model="workspaceForm.darkSecondaryColor"
                       label="Secondary"
                       type="color"
                       variant="outlined"
                       density="comfortable"
                       :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                      :error-messages="addEdit.fieldErrors.secondaryColor ? [addEdit.fieldErrors.secondaryColor] : []"
+                      :error-messages="
+                        addEdit.fieldErrors.darkSecondaryColor ? [addEdit.fieldErrors.darkSecondaryColor] : []
+                      "
                     />
                   </v-col>
 
                   <v-col cols="12" md="3">
                     <v-text-field
-                      v-model="workspaceForm.surfaceColor"
+                      v-model="workspaceForm.darkSurfaceColor"
                       label="Surface"
                       type="color"
                       variant="outlined"
                       density="comfortable"
                       :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                      :error-messages="addEdit.fieldErrors.surfaceColor ? [addEdit.fieldErrors.surfaceColor] : []"
+                      :error-messages="
+                        addEdit.fieldErrors.darkSurfaceColor ? [addEdit.fieldErrors.darkSurfaceColor] : []
+                      "
                     />
                   </v-col>
 
                   <v-col cols="12" md="3">
                     <v-text-field
-                      v-model="workspaceForm.surfaceVariantColor"
+                      v-model="workspaceForm.darkSurfaceVariantColor"
                       label="Surface variant"
                       type="color"
                       variant="outlined"
                       density="comfortable"
                       :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
                       :error-messages="
-                        addEdit.fieldErrors.surfaceVariantColor ? [addEdit.fieldErrors.surfaceVariantColor] : []
+                        addEdit.fieldErrors.darkSurfaceVariantColor
+                          ? [addEdit.fieldErrors.darkSurfaceVariantColor]
+                          : []
                       "
                     />
                   </v-col>
@@ -140,8 +214,9 @@ import { workspaceSettingsResource } from "@jskit-ai/users-core/shared/resources
 import { WORKSPACE_SETTINGS_CHANGED_EVENT } from "@jskit-ai/users-core/shared/events/usersEvents";
 import { USERS_ROUTE_VISIBILITY_WORKSPACE } from "@jskit-ai/users-core/shared/support/usersVisibility";
 import {
-  DEFAULT_WORKSPACE_COLOR,
-  resolveWorkspaceThemePalette
+  DEFAULT_WORKSPACE_DARK_PALETTE,
+  DEFAULT_WORKSPACE_LIGHT_PALETTE,
+  resolveWorkspaceThemePalettes
 } from "@jskit-ai/users-core/shared/settings";
 import { useWebPlacementContext } from "@jskit-ai/shell-web/client/placement";
 import { useAddEdit } from "../composables/useAddEdit.js";
@@ -152,16 +227,16 @@ import { arePermissionListsEqual, normalizePermissionList } from "../lib/permiss
 import { createWorkspaceRealtimeMatcher } from "../support/realtimeWorkspace.js";
 import { buildWorkspaceQueryKey } from "../support/workspaceQueryKeys.js";
 
-const DEFAULT_WORKSPACE_THEME = resolveWorkspaceThemePalette({
-  color: DEFAULT_WORKSPACE_COLOR
-});
-
 const workspaceForm = reactive({
   name: "",
-  color: DEFAULT_WORKSPACE_COLOR,
-  secondaryColor: DEFAULT_WORKSPACE_THEME.secondaryColor,
-  surfaceColor: DEFAULT_WORKSPACE_THEME.surfaceColor,
-  surfaceVariantColor: DEFAULT_WORKSPACE_THEME.surfaceVariantColor,
+  lightPrimaryColor: DEFAULT_WORKSPACE_LIGHT_PALETTE.color,
+  lightSecondaryColor: DEFAULT_WORKSPACE_LIGHT_PALETTE.secondaryColor,
+  lightSurfaceColor: DEFAULT_WORKSPACE_LIGHT_PALETTE.surfaceColor,
+  lightSurfaceVariantColor: DEFAULT_WORKSPACE_LIGHT_PALETTE.surfaceVariantColor,
+  darkPrimaryColor: DEFAULT_WORKSPACE_DARK_PALETTE.color,
+  darkSecondaryColor: DEFAULT_WORKSPACE_DARK_PALETTE.secondaryColor,
+  darkSurfaceColor: DEFAULT_WORKSPACE_DARK_PALETTE.surfaceColor,
+  darkSurfaceVariantColor: DEFAULT_WORKSPACE_DARK_PALETTE.surfaceVariantColor,
   avatarUrl: "",
   invitesEnabled: false,
   invitesAvailable: false
@@ -195,12 +270,16 @@ function toWorkspaceSettingsSnapshot(settings = null) {
     return "";
   }
 
-  const normalized = resolveWorkspaceThemePalette(settings);
+  const normalized = resolveWorkspaceThemePalettes(settings);
   return JSON.stringify({
-    color: normalized.color,
-    secondaryColor: normalized.secondaryColor,
-    surfaceColor: normalized.surfaceColor,
-    surfaceVariantColor: normalized.surfaceVariantColor,
+    lightPrimaryColor: normalized.light.color,
+    lightSecondaryColor: normalized.light.secondaryColor,
+    lightSurfaceColor: normalized.light.surfaceColor,
+    lightSurfaceVariantColor: normalized.light.surfaceVariantColor,
+    darkPrimaryColor: normalized.dark.color,
+    darkSecondaryColor: normalized.dark.secondaryColor,
+    darkSurfaceColor: normalized.dark.surfaceColor,
+    darkSurfaceVariantColor: normalized.dark.surfaceVariantColor,
     invitesEnabled: settings.invitesEnabled !== false,
     invitesAvailable: settings.invitesAvailable !== false
   });
@@ -267,7 +346,18 @@ const addEdit = useAddEdit({
   savePermissions: ["workspace.settings.update"],
   placementSource: "users-web.workspace-settings-view",
   fallbackLoadError: "Unable to load workspace settings.",
-  fieldErrorKeys: ["name", "avatarUrl", "color", "secondaryColor", "surfaceColor", "surfaceVariantColor"],
+  fieldErrorKeys: [
+    "name",
+    "avatarUrl",
+    "lightPrimaryColor",
+    "lightSecondaryColor",
+    "lightSurfaceColor",
+    "lightSurfaceVariantColor",
+    "darkPrimaryColor",
+    "darkSecondaryColor",
+    "darkSurfaceColor",
+    "darkSurfaceVariantColor"
+  ],
   realtime: {
     event: WORKSPACE_SETTINGS_CHANGED_EVENT,
     matches: matchesWorkspaceRealtime
@@ -281,23 +371,31 @@ const addEdit = useAddEdit({
     }),
   mapLoadedToModel: (model, payload = {}) => {
     const settings = payload?.settings && typeof payload.settings === "object" ? payload.settings : {};
-    const normalizedTheme = resolveWorkspaceThemePalette(settings);
+    const normalizedTheme = resolveWorkspaceThemePalettes(settings);
 
     model.name = String(settings.name || "");
-    model.color = normalizedTheme.color;
-    model.secondaryColor = normalizedTheme.secondaryColor;
-    model.surfaceColor = normalizedTheme.surfaceColor;
-    model.surfaceVariantColor = normalizedTheme.surfaceVariantColor;
+    model.lightPrimaryColor = normalizedTheme.light.color;
+    model.lightSecondaryColor = normalizedTheme.light.secondaryColor;
+    model.lightSurfaceColor = normalizedTheme.light.surfaceColor;
+    model.lightSurfaceVariantColor = normalizedTheme.light.surfaceVariantColor;
+    model.darkPrimaryColor = normalizedTheme.dark.color;
+    model.darkSecondaryColor = normalizedTheme.dark.secondaryColor;
+    model.darkSurfaceColor = normalizedTheme.dark.surfaceColor;
+    model.darkSurfaceVariantColor = normalizedTheme.dark.surfaceVariantColor;
     model.avatarUrl = String(settings.avatarUrl || "");
     model.invitesEnabled = settings.invitesEnabled !== false;
     model.invitesAvailable = settings.invitesAvailable !== false;
   },
   buildRawPayload: (model) => ({
     name: model.name,
-    color: model.color,
-    secondaryColor: model.secondaryColor,
-    surfaceColor: model.surfaceColor,
-    surfaceVariantColor: model.surfaceVariantColor,
+    lightPrimaryColor: model.lightPrimaryColor,
+    lightSecondaryColor: model.lightSecondaryColor,
+    lightSurfaceColor: model.lightSurfaceColor,
+    lightSurfaceVariantColor: model.lightSurfaceVariantColor,
+    darkPrimaryColor: model.darkPrimaryColor,
+    darkSecondaryColor: model.darkSecondaryColor,
+    darkSurfaceColor: model.darkSurfaceColor,
+    darkSurfaceVariantColor: model.darkSurfaceVariantColor,
     avatarUrl: model.avatarUrl,
     invitesEnabled: model.invitesEnabled
   }),

package/src/client/composables/useAccountSettingsRuntime.js

@@ -12,6 +12,7 @@ import { userProfileResource } from "@jskit-ai/users-core/shared/resources/userP
 import { userSettingsResource } from "@jskit-ai/users-core/shared/resources/userSettingsResource";
 import { USERS_ROUTE_VISIBILITY_PUBLIC } from "@jskit-ai/users-core/shared/support/usersVisibility";
 import {
+  persistThemePreference,
   resolveThemeNameForPreference,
   setVuetifyThemeName
 } from "../lib/theme.js";
@@ -151,6 +152,7 @@ function useAccountSettingsRuntime() {
   function applyThemePreference(themePreference) {
     const themeName = resolveThemeNameForPreference(themePreference);
     setVuetifyThemeName(vuetifyTheme, themeName);
+    persistThemePreference(themePreference);
   }
 
   function applyAvatarData(avatar) {

package/src/client/lib/theme.js

@@ -4,6 +4,7 @@ import { resolveWorkspaceThemePalette } from "@jskit-ai/users-core/shared/settin
 const THEME_PREFERENCE_LIGHT = "light";
 const THEME_PREFERENCE_DARK = "dark";
 const THEME_PREFERENCE_SYSTEM = "system";
+const THEME_PREFERENCE_STORAGE_KEY = "jskit.themePreference";
 const HEX_COLOR_PATTERN = /^#[0-9A-Fa-f]{6}$/;
 const WORKSPACE_THEME_NAME_LIGHT = "workspace-light";
 const WORKSPACE_THEME_NAME_DARK = "workspace-dark";
@@ -41,15 +42,80 @@ function resolveThemeNameForPreference(themePreference, options = {}) {
   return resolveSystemThemeName(options);
 }
 
+function resolveThemePreferenceStorage(options = {}) {
+  const customStorage = options && typeof options === "object" ? options.storage : null;
+  if (customStorage && typeof customStorage === "object") {
+    return customStorage;
+  }
+
+  if (typeof window !== "object" || !window) {
+    return null;
+  }
+
+  let storage = null;
+  try {
+    storage = window.localStorage;
+  } catch {
+    return null;
+  }
+  if (!storage || typeof storage !== "object") {
+    return null;
+  }
+  return storage;
+}
+
+function readPersistedThemePreference(options = {}) {
+  const storage = resolveThemePreferenceStorage(options);
+  if (!storage || typeof storage.getItem !== "function") {
+    return THEME_PREFERENCE_SYSTEM;
+  }
+
+  try {
+    const value = storage.getItem(THEME_PREFERENCE_STORAGE_KEY);
+    return normalizeThemePreference(value);
+  } catch {
+    return THEME_PREFERENCE_SYSTEM;
+  }
+}
+
+function persistThemePreference(themePreference, options = {}) {
+  const storage = resolveThemePreferenceStorage(options);
+  if (!storage || typeof storage.setItem !== "function") {
+    return false;
+  }
+
+  const normalizedPreference = normalizeThemePreference(themePreference);
+  try {
+    storage.setItem(THEME_PREFERENCE_STORAGE_KEY, normalizedPreference);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function resolveBootstrapThemePreference(payload = {}, options = {}) {
+  const source = payload && typeof payload === "object" ? payload : {};
+  const session = source.session && typeof source.session === "object" ? source.session : {};
+  if (session.authenticated === true) {
+    const userSettings = source.userSettings && typeof source.userSettings === "object" ? source.userSettings : {};
+    return normalizeThemePreference(userSettings.theme);
+  }
+
+  return readPersistedThemePreference(options);
+}
+
 function resolveBootstrapThemeName(payload = {}, options = {}) {
+  return resolveThemeNameForPreference(resolveBootstrapThemePreference(payload, options), options);
+}
+
+function persistBootstrapThemePreference(payload = {}, options = {}) {
   const source = payload && typeof payload === "object" ? payload : {};
   const session = source.session && typeof source.session === "object" ? source.session : {};
   if (session.authenticated !== true) {
-    return THEME_PREFERENCE_LIGHT;
+    return false;
   }
 
-  const userSettings = source.userSettings && typeof source.userSettings === "object" ? source.userSettings : {};
-  return resolveThemeNameForPreference(userSettings.theme, options);
+  return persistThemePreference(resolveBootstrapThemePreference(payload, options), options);
 }
 
 function resolveVuetifyThemeController(vueApp) {
@@ -175,8 +241,7 @@ function composeWorkspaceThemeDefinition(baseThemeDefinition, palette) {
       primary: palette.color,
       secondary: palette.secondaryColor,
       surface: palette.surfaceColor,
-      "surface-variant": palette.surfaceVariantColor,
-      background: palette.backgroundColor
+      "surface-variant": palette.surfaceVariantColor
     }
   };
 }
@@ -235,9 +300,10 @@ function setVuetifyPrimaryColorOverride(themeController, themeInput = null) {
     return false;
   }
 
-  const palette = resolveWorkspaceThemePalette(source);
-  const nextLightTheme = composeWorkspaceThemeDefinition(baseLightTheme, palette);
-  const nextDarkTheme = composeWorkspaceThemeDefinition(baseDarkTheme, palette);
+  const lightPalette = resolveWorkspaceThemePalette(source, { mode: THEME_PREFERENCE_LIGHT });
+  const darkPalette = resolveWorkspaceThemePalette(source, { mode: THEME_PREFERENCE_DARK });
+  const nextLightTheme = composeWorkspaceThemeDefinition(baseLightTheme, lightPalette);
+  const nextDarkTheme = composeWorkspaceThemeDefinition(baseDarkTheme, darkPalette);
   const nextThemeName =
     normalizedThemeName === THEME_PREFERENCE_DARK ? WORKSPACE_THEME_NAME_DARK : WORKSPACE_THEME_NAME_LIGHT;
 
@@ -255,6 +321,10 @@ function setVuetifyPrimaryColorOverride(themeController, themeInput = null) {
 export {
   hexColorToRgb,
   normalizeThemePreference,
+  persistBootstrapThemePreference,
+  persistThemePreference,
+  readPersistedThemePreference,
+  resolveBootstrapThemePreference,
   resolveThemeNameForPreference,
   resolveBootstrapThemeName,
   resolveVuetifyThemeController,

package/src/client/runtime/bootstrapPlacementRuntime.js

@@ -12,6 +12,7 @@ import {
 } from "../lib/bootstrap.js";
 import { normalizePermissionList } from "../lib/permissions.js";
 import {
+  persistBootstrapThemePreference,
   resolveBootstrapThemeName,
   setVuetifyPrimaryColorOverride,
   resolveVuetifyThemeController,
@@ -202,6 +203,7 @@ function createBootstrapPlacementRuntime({ app, logger = null, fetchBootstrap =
     try {
       const nextThemeName = resolveBootstrapThemeName(payload);
       setVuetifyThemeName(themeController, nextThemeName);
+      persistBootstrapThemePreference(payload);
     } catch (error) {
       runtimeLogger.warn(
         {

package/test/bootstrapPlacementRuntime.test.js

@@ -478,10 +478,23 @@ test("bootstrap placement runtime refetches when auth context changes", async ()
   assert.deepEqual(fetchCalls, ["acme", "acme"]);
 });
 
-test("bootstrap placement runtime forces light theme for unauthenticated bootstrap payloads", async () => {
+test("bootstrap placement runtime applies persisted theme preference for unauthenticated bootstrap payloads", async () => {
   const placementRuntime = createPlacementRuntimeStub();
   const router = createRouterStub("/auth/login");
   const themeController = createVuetifyThemeController("dark");
+  const storage = new Map();
+  storage.set("jskit.themePreference", "dark");
+  const originalWindow = globalThis.window;
+  globalThis.window = {
+    localStorage: {
+      getItem(key) {
+        return storage.get(key) || null;
+      },
+      setItem(key, value) {
+        storage.set(key, value);
+      }
+    }
+  };
   const runtime = createBootstrapPlacementRuntime({
     app: createAppStub({
       [WEB_PLACEMENT_RUNTIME_CLIENT_TOKEN]: placementRuntime,
@@ -499,8 +512,16 @@ test("bootstrap placement runtime forces light theme for unauthenticated bootstr
     }
   });
 
-  await runtime.initialize();
-  assert.equal(themeController.global.name.value, "light");
+  try {
+    await runtime.initialize();
+    assert.equal(themeController.global.name.value, "dark");
+  } finally {
+    if (typeof originalWindow === "undefined") {
+      delete globalThis.window;
+    } else {
+      globalThis.window = originalWindow;
+    }
+  }
 });
 
 test("bootstrap placement runtime reapplies theme when bootstrap payload changes", async () => {
@@ -563,12 +584,21 @@ test("bootstrap placement runtime applies workspace palette via Vuetify workspac
           authenticated: true,
           userId: 1
         },
+        workspaceSettings: {
+          lightPrimaryColor: "#CC3344",
+          lightSecondaryColor: "#884455",
+          lightSurfaceColor: "#F4F4F4",
+          lightSurfaceVariantColor: "#444444",
+          darkPrimaryColor: "#BB2233",
+          darkSecondaryColor: "#557799",
+          darkSurfaceColor: "#202020",
+          darkSurfaceVariantColor: "#A0A0A0"
+        },
         workspaces: [
           {
             id: 1,
             slug: "acme",
-            name: "Acme Workspace",
-            color: "#CC3344"
+            name: "Acme Workspace"
           }
         ],
         permissions: []
@@ -578,7 +608,12 @@ test("bootstrap placement runtime applies workspace palette via Vuetify workspac
 
   await runtime.initialize();
   const palette = resolveWorkspaceThemePalette({
-    color: "#CC3344"
+    lightPrimaryColor: "#CC3344",
+    lightSecondaryColor: "#884455",
+    lightSurfaceColor: "#F4F4F4",
+    lightSurfaceVariantColor: "#444444"
+  }, {
+    mode: "light"
   });
   assert.equal(themeController.global.name.value, "workspace-light");
   assert.equal(themeController.themes.value["workspace-light"].colors.primary, palette.color);
@@ -588,7 +623,6 @@ test("bootstrap placement runtime applies workspace palette via Vuetify workspac
     themeController.themes.value["workspace-light"].colors["surface-variant"],
     palette.surfaceVariantColor
   );
-  assert.equal(themeController.themes.value["workspace-light"].colors.background, palette.backgroundColor);
 
   router.currentRoute.value.path = "/home";
   router.currentRoute.value.fullPath = "/home";

package/test/theme.test.js

@@ -5,6 +5,10 @@ import { resolveWorkspaceThemePalette } from "@jskit-ai/users-core/shared/settin
 import {
   hexColorToRgb,
   normalizeThemePreference,
+  persistBootstrapThemePreference,
+  persistThemePreference,
+  readPersistedThemePreference,
+  resolveBootstrapThemePreference,
   resolveThemeNameForPreference,
   resolveBootstrapThemeName,
   resolveVuetifyThemeController,
@@ -60,16 +64,23 @@ test("resolveThemeNameForPreference resolves system using explicit prefersDark",
   assert.equal(resolveThemeNameForPreference("light", { prefersDark: true }), "light");
 });
 
-test("resolveBootstrapThemeName keeps unauthenticated payload in light theme", () => {
+test("resolveBootstrapThemeName uses persisted preference for unauthenticated payloads", () => {
+  const storage = new Map();
+  storage.set("jskit.themePreference", "dark");
+
   assert.equal(
-    resolveBootstrapThemeName(
-      {
-        session: { authenticated: false },
-        userSettings: { theme: "dark" }
+    resolveBootstrapThemeName({
+      session: { authenticated: false },
+      userSettings: { theme: "light" }
+    }, {
+      storage: {
+        getItem(key) {
+          return storage.get(key) || null;
+        }
       },
-      { prefersDark: true }
-    ),
-    "light"
+      prefersDark: false
+    }),
+    "dark"
   );
 });
 
@@ -96,6 +107,45 @@ test("resolveBootstrapThemeName uses authenticated user preference", () => {
   );
 });
 
+test("theme preference persistence helpers normalize values", () => {
+  const storage = new Map();
+  const storageAdapter = {
+    getItem(key) {
+      return storage.get(key) || null;
+    },
+    setItem(key, value) {
+      storage.set(key, value);
+    }
+  };
+
+  assert.equal(readPersistedThemePreference({ storage: storageAdapter }), "system");
+  assert.equal(persistThemePreference(" DARK ", { storage: storageAdapter }), true);
+  assert.equal(readPersistedThemePreference({ storage: storageAdapter }), "dark");
+
+  assert.equal(
+    resolveBootstrapThemePreference(
+      {
+        session: { authenticated: false }
+      },
+      { storage: storageAdapter }
+    ),
+    "dark"
+  );
+  assert.equal(
+    persistBootstrapThemePreference(
+      {
+        session: { authenticated: true },
+        userSettings: {
+          theme: "light"
+        }
+      },
+      { storage: storageAdapter }
+    ),
+    true
+  );
+  assert.equal(readPersistedThemePreference({ storage: storageAdapter }), "light");
+});
+
 test("resolveVuetifyThemeController reads theme controller from Vue app provides", () => {
   const themeController = createVuetifyThemeController("light");
   const vueApp = {
@@ -126,27 +176,45 @@ test("hexColorToRgb returns Vuetify rgb tuple and rejects invalid values", () =>
 
 test("setVuetifyPrimaryColorOverride mutates workspace themes and restores base theme names", () => {
   const themeController = createVuetifyThemeController("light");
-  const expectedPalette = resolveWorkspaceThemePalette({
-    color: "#CC3344"
+  const themeInput = {
+    lightPrimaryColor: "#CC3344",
+    lightSecondaryColor: "#884455",
+    lightSurfaceColor: "#F4F4F4",
+    lightSurfaceVariantColor: "#444444",
+    darkPrimaryColor: "#BB2233",
+    darkSecondaryColor: "#557799",
+    darkSurfaceColor: "#202020",
+    darkSurfaceVariantColor: "#A0A0A0"
+  };
+  const expectedLightPalette = resolveWorkspaceThemePalette(themeInput, {
+    mode: "light"
+  });
+  const expectedDarkPalette = resolveWorkspaceThemePalette(themeInput, {
+    mode: "dark"
   });
 
-  assert.equal(setVuetifyPrimaryColorOverride(themeController, { color: "#CC3344" }), true);
+  assert.equal(setVuetifyPrimaryColorOverride(themeController, themeInput), true);
   assert.equal(themeController.global.name.value, "workspace-light");
-  assert.equal(themeController.themes.value["workspace-light"].colors.primary, expectedPalette.color);
-  assert.equal(themeController.themes.value["workspace-light"].colors.secondary, expectedPalette.secondaryColor);
-  assert.equal(themeController.themes.value["workspace-light"].colors.surface, expectedPalette.surfaceColor);
+  assert.equal(themeController.themes.value["workspace-light"].colors.primary, expectedLightPalette.color);
+  assert.equal(themeController.themes.value["workspace-light"].colors.secondary, expectedLightPalette.secondaryColor);
+  assert.equal(themeController.themes.value["workspace-light"].colors.surface, expectedLightPalette.surfaceColor);
   assert.equal(
     themeController.themes.value["workspace-light"].colors["surface-variant"],
-    expectedPalette.surfaceVariantColor
+    expectedLightPalette.surfaceVariantColor
   );
-  assert.equal(themeController.themes.value["workspace-light"].colors.background, expectedPalette.backgroundColor);
 
-  assert.equal(setVuetifyPrimaryColorOverride(themeController, { color: "#CC3344" }), false);
+  assert.equal(setVuetifyPrimaryColorOverride(themeController, themeInput), false);
 
   assert.equal(setVuetifyThemeName(themeController, "dark"), true);
-  assert.equal(setVuetifyPrimaryColorOverride(themeController, { color: "#CC3344" }), true);
+  assert.equal(setVuetifyPrimaryColorOverride(themeController, themeInput), true);
   assert.equal(themeController.global.name.value, "workspace-dark");
-  assert.equal(themeController.themes.value["workspace-dark"].colors.primary, expectedPalette.color);
+  assert.equal(themeController.themes.value["workspace-dark"].colors.primary, expectedDarkPalette.color);
+  assert.equal(themeController.themes.value["workspace-dark"].colors.secondary, expectedDarkPalette.secondaryColor);
+  assert.equal(themeController.themes.value["workspace-dark"].colors.surface, expectedDarkPalette.surfaceColor);
+  assert.equal(
+    themeController.themes.value["workspace-dark"].colors["surface-variant"],
+    expectedDarkPalette.surfaceVariantColor
+  );
 
   assert.equal(setVuetifyPrimaryColorOverride(themeController, null), true);
   assert.equal(themeController.global.name.value, "dark");