@jskit-ai/users-web 0.1.10 → 0.1.12

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/users-web",
-  version: "0.1.10",
+  version: "0.1.12",
   description: "Users web module: workspace selector shell element plus workspace/profile/members UI elements.",
   dependsOn: [
     "@jskit-ai/http-runtime",
@@ -234,7 +234,7 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@tanstack/vue-query": "^5.90.5",
+        "@tanstack/vue-query": "5.92.12",
         "@mdi/js": "^7.4.47",
         "@uppy/compressor": "^3.1.0",
         "@uppy/core": "^5.2.0",
@@ -251,7 +251,11 @@ export default Object.freeze({
       dev: {}
     },
     packageJson: {
-      scripts: {}
+      scripts: {
+        "server:account": "SERVER_SURFACE=account node ./bin/server.js",
+        "dev:account": "VITE_SURFACE=account vite",
+        "build:account": "VITE_SURFACE=account vite build"
+      }
     },
     procfile: {},
     files: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -19,7 +19,7 @@
     "./client/support/realtimeWorkspace": "./src/client/support/realtimeWorkspace.js"
   },
   "dependencies": {
-    "@tanstack/vue-query": "^5.90.5",
+    "@tanstack/vue-query": "5.92.12",
     "@mdi/js": "^7.4.47",
     "@jskit-ai/users-core": "0.1.10",
     "@jskit-ai/realtime": "0.1.8",

package/src/client/components/MembersAdminClientElement.vue

@@ -167,6 +167,7 @@
 
 <script setup>
 import { computed, toRefs, unref } from "vue";
+import { formatDateTime as formatKernelDateTime } from "@jskit-ai/kernel/shared/support";
 import { requireBoolean, requireFunction, requireRecord } from "../support/contractGuards.js";
 
 const props = defineProps({
@@ -327,13 +328,7 @@ function formatDateTime(value) {
   if (typeof options.value.formatDateTime === "function") {
     return options.value.formatDateTime(value);
   }
-
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return "unknown";
-  }
-
-  return date.toLocaleString();
+  return formatKernelDateTime(value);
 }
 
 function showOwnerChip(member) {

package/src/client/components/UsersWorkspaceSelector.vue

@@ -191,6 +191,17 @@ const activeWorkspaceLabel = computed(() => {
   return "Workspace";
 });
 
+function workspaceAvatarStyle(workspace) {
+  const color = String(workspace?.color || "").trim();
+  if (!/^#[0-9a-fA-F]{6}$/.test(color)) {
+    return {};
+  }
+
+  return {
+    backgroundColor: color
+  };
+}
+
 </script>
 
 <template>
@@ -218,7 +229,7 @@ const activeWorkspaceLabel = computed(() => {
         @click="navigateToWorkspace(workspace.slug)"
       >
         <template #prepend>
-          <v-avatar size="24" color="primary" variant="tonal">
+          <v-avatar size="24" color="primary" variant="tonal" :style="workspaceAvatarStyle(workspace)">
             <span class="text-caption">{{ String(workspace.name || "W").slice(0, 1).toUpperCase() }}</span>
           </v-avatar>
         </template>

package/src/client/components/WorkspaceMembersClientElement.vue

@@ -20,6 +20,7 @@
 
 <script setup>
 import { computed, reactive, ref, watch } from "vue";
+import { formatDateTime } from "@jskit-ai/kernel/shared/support";
 import MembersAdminClientElement from "./MembersAdminClientElement.vue";
 import { useCommand } from "../composables/useCommand.js";
 import { useList } from "../composables/useList.js";
@@ -29,7 +30,7 @@ import { useAccess } from "../composables/useAccess.js";
 import { useUiFeedback } from "../composables/useUiFeedback.js";
 import { useWorkspaceRouteContext } from "../composables/useWorkspaceRouteContext.js";
 import { useShellWebErrorRuntime } from "@jskit-ai/shell-web/client/error";
-import { matchesCurrentWorkspaceEvent } from "../support/realtimeWorkspace.js";
+import { createWorkspaceRealtimeMatcher } from "../support/realtimeWorkspace.js";
 import { buildWorkspaceQueryKey } from "../support/workspaceQueryKeys.js";
 import {
   WORKSPACE_SETTINGS_CHANGED_EVENT,
@@ -53,11 +54,7 @@ const options = reactive({
   inviteRoleOptions: [],
   memberRoleOptions: [],
   formatDateTime(value) {
-    const parsedDate = new Date(value);
-    if (Number.isNaN(parsedDate.getTime())) {
-      return "unknown";
-    }
-    return parsedDate.toLocaleString();
+    return formatDateTime(value);
   }
 });
 
@@ -106,9 +103,7 @@ const access = useAccess({
   placementSource: "users-web.workspace-members-view"
 });
 
-function isCurrentWorkspaceRealtimeEvent({ payload = {} } = {}) {
-  return matchesCurrentWorkspaceEvent(payload, workspaceSlugFromRoute.value);
-}
+const matchesWorkspaceRealtime = createWorkspaceRealtimeMatcher(workspaceSlugFromRoute);
 
 const canViewMembers = computed(() => {
   return access.canAny(["workspace.members.view", "workspace.members.manage"]);
@@ -280,7 +275,7 @@ const workspaceSettingsView = useView({
   viewPermissions: ["workspace.members.invite"],
   realtime: {
     event: WORKSPACE_SETTINGS_CHANGED_EVENT,
-    matches: isCurrentWorkspaceRealtimeEvent
+    matches: matchesWorkspaceRealtime
   },
   fallbackLoadError: "Unable to load workspace settings."
 });
@@ -301,7 +296,7 @@ const workspaceMembersList = useList({
   viewPermissions: ["workspace.members.view", "workspace.members.manage"],
   realtime: {
     event: WORKSPACE_MEMBERS_CHANGED_EVENT,
-    matches: isCurrentWorkspaceRealtimeEvent
+    matches: matchesWorkspaceRealtime
   },
   selectItems: (payload) => normalizeMembers(payload?.members),
   fallbackLoadError: "Unable to load workspace members."
@@ -315,7 +310,7 @@ const workspaceInvitesList = useList({
   viewPermissions: ["workspace.members.view", "workspace.members.manage"],
   realtime: {
     event: WORKSPACE_INVITES_CHANGED_EVENT,
-    matches: isCurrentWorkspaceRealtimeEvent
+    matches: matchesWorkspaceRealtime
   },
   selectItems: (payload) => normalizeInvites(payload?.invites),
   fallbackLoadError: "Unable to load workspace invites."

package/src/client/components/WorkspaceSettingsClientElement.vue

@@ -23,7 +23,7 @@
           <v-form @submit.prevent="addEdit.submit" novalidate>
             <v-progress-linear v-if="addEdit.isRefetching" indeterminate class="mb-4" />
             <v-row>
-              <v-col cols="12" md="5">
+              <v-col cols="12" md="6">
                 <v-text-field
                   v-model="workspaceForm.name"
                   label="Workspace name"
@@ -34,19 +34,7 @@
                 />
               </v-col>
 
-              <v-col cols="12" md="2">
-                <v-text-field
-                  v-model="workspaceForm.color"
-                  label="Workspace color"
-                  type="color"
-                  variant="outlined"
-                  density="comfortable"
-                  :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
-                  :error-messages="addEdit.fieldErrors.color ? [addEdit.fieldErrors.color] : []"
-                />
-              </v-col>
-
-              <v-col cols="12" md="5">
+              <v-col cols="12" md="6">
                 <v-text-field
                   v-model="workspaceForm.avatarUrl"
                   label="Workspace avatar URL"
@@ -60,6 +48,61 @@
                 />
               </v-col>
 
+              <v-col cols="12">
+                <div class="text-subtitle-2 mb-2">Theme colors</div>
+                <v-row dense>
+                  <v-col cols="12" md="3">
+                    <v-text-field
+                      v-model="workspaceForm.color"
+                      label="Primary"
+                      type="color"
+                      variant="outlined"
+                      density="comfortable"
+                      :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
+                      :error-messages="addEdit.fieldErrors.color ? [addEdit.fieldErrors.color] : []"
+                    />
+                  </v-col>
+
+                  <v-col cols="12" md="3">
+                    <v-text-field
+                      v-model="workspaceForm.secondaryColor"
+                      label="Secondary"
+                      type="color"
+                      variant="outlined"
+                      density="comfortable"
+                      :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
+                      :error-messages="addEdit.fieldErrors.secondaryColor ? [addEdit.fieldErrors.secondaryColor] : []"
+                    />
+                  </v-col>
+
+                  <v-col cols="12" md="3">
+                    <v-text-field
+                      v-model="workspaceForm.surfaceColor"
+                      label="Surface"
+                      type="color"
+                      variant="outlined"
+                      density="comfortable"
+                      :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
+                      :error-messages="addEdit.fieldErrors.surfaceColor ? [addEdit.fieldErrors.surfaceColor] : []"
+                    />
+                  </v-col>
+
+                  <v-col cols="12" md="3">
+                    <v-text-field
+                      v-model="workspaceForm.surfaceVariantColor"
+                      label="Surface variant"
+                      type="color"
+                      variant="outlined"
+                      density="comfortable"
+                      :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
+                      :error-messages="
+                        addEdit.fieldErrors.surfaceVariantColor ? [addEdit.fieldErrors.surfaceVariantColor] : []
+                      "
+                    />
+                  </v-col>
+                </v-row>
+              </v-col>
+
               <v-col cols="12" md="6" class="d-flex align-center">
                 <v-switch
                   v-model="workspaceForm.invitesEnabled"
@@ -96,20 +139,29 @@ import { validateOperationSection } from "@jskit-ai/http-runtime/shared/validato
 import { workspaceSettingsResource } from "@jskit-ai/users-core/shared/resources/workspaceSettingsResource";
 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
+} from "@jskit-ai/users-core/shared/settings";
 import { useWebPlacementContext } from "@jskit-ai/shell-web/client/placement";
 import { useAddEdit } from "../composables/useAddEdit.js";
 import { useBootstrapQuery } from "../composables/useBootstrapQuery.js";
 import { useWorkspaceRouteContext } from "../composables/useWorkspaceRouteContext.js";
 import { findWorkspaceBySlug, normalizeWorkspaceList } from "../lib/bootstrap.js";
 import { arePermissionListsEqual, normalizePermissionList } from "../lib/permissions.js";
-import { matchesCurrentWorkspaceEvent } from "../support/realtimeWorkspace.js";
+import { createWorkspaceRealtimeMatcher } from "../support/realtimeWorkspace.js";
 import { buildWorkspaceQueryKey } from "../support/workspaceQueryKeys.js";
 
-const DEFAULT_WORKSPACE_COLOR = "#0F6B54";
+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,
   avatarUrl: "",
   invitesEnabled: false,
   invitesAvailable: false
@@ -138,6 +190,22 @@ function toWorkspaceListSnapshot(list = []) {
   return JSON.stringify(normalizeWorkspaceList(list));
 }
 
+function toWorkspaceSettingsSnapshot(settings = null) {
+  if (!settings || typeof settings !== "object") {
+    return "";
+  }
+
+  const normalized = resolveWorkspaceThemePalette(settings);
+  return JSON.stringify({
+    color: normalized.color,
+    secondaryColor: normalized.secondaryColor,
+    surfaceColor: normalized.surfaceColor,
+    surfaceVariantColor: normalized.surfaceVariantColor,
+    invitesEnabled: settings.invitesEnabled !== false,
+    invitesAvailable: settings.invitesAvailable !== false
+  });
+}
+
 function applyShellWorkspaceContext(payload = {}) {
   const availableWorkspaces = normalizeWorkspaceList(payload?.workspaces);
   const currentWorkspace = findWorkspaceBySlug(
@@ -154,14 +222,21 @@ function applyShellWorkspaceContext(payload = {}) {
   const sameWorkspace = toWorkspaceEntrySnapshot(currentContext.workspace) === toWorkspaceEntrySnapshot(currentWorkspace);
   const sameWorkspaces =
     toWorkspaceListSnapshot(currentContext.workspaces) === toWorkspaceListSnapshot(availableWorkspaces);
+  const sameWorkspaceSettings =
+    toWorkspaceSettingsSnapshot(currentContext.workspaceSettings) ===
+    toWorkspaceSettingsSnapshot(payload?.workspaceSettings);
 
-  if (samePermissions && sameWorkspace && sameWorkspaces) {
+  if (samePermissions && sameWorkspace && sameWorkspaces && sameWorkspaceSettings) {
     return;
   }
 
   mergePlacementContext(
     {
       workspace: currentWorkspace,
+      workspaceSettings:
+        payload?.workspaceSettings && typeof payload.workspaceSettings === "object"
+          ? payload.workspaceSettings
+          : null,
       workspaces: availableWorkspaces,
       permissions
     },
@@ -180,9 +255,7 @@ watch(
   { immediate: true }
 );
 
-function isCurrentWorkspaceRealtimeEvent({ payload = {} } = {}) {
-  return matchesCurrentWorkspaceEvent(payload, routeContext.workspaceSlugFromRoute.value);
-}
+const matchesWorkspaceRealtime = createWorkspaceRealtimeMatcher(routeContext.workspaceSlugFromRoute);
 
 const addEdit = useAddEdit({
   ownershipFilter: OWNERSHIP_WORKSPACE,
@@ -194,10 +267,10 @@ const addEdit = useAddEdit({
   savePermissions: ["workspace.settings.update"],
   placementSource: "users-web.workspace-settings-view",
   fallbackLoadError: "Unable to load workspace settings.",
-  fieldErrorKeys: ["name", "avatarUrl", "color"],
+  fieldErrorKeys: ["name", "avatarUrl", "color", "secondaryColor", "surfaceColor", "surfaceVariantColor"],
   realtime: {
     event: WORKSPACE_SETTINGS_CHANGED_EVENT,
-    matches: isCurrentWorkspaceRealtimeEvent
+    matches: matchesWorkspaceRealtime
   },
   model: workspaceForm,
   parseInput: (rawPayload) =>
@@ -208,9 +281,13 @@ const addEdit = useAddEdit({
     }),
   mapLoadedToModel: (model, payload = {}) => {
     const settings = payload?.settings && typeof payload.settings === "object" ? payload.settings : {};
+    const normalizedTheme = resolveWorkspaceThemePalette(settings);
 
     model.name = String(settings.name || "");
-    model.color = String(settings.color || DEFAULT_WORKSPACE_COLOR);
+    model.color = normalizedTheme.color;
+    model.secondaryColor = normalizedTheme.secondaryColor;
+    model.surfaceColor = normalizedTheme.surfaceColor;
+    model.surfaceVariantColor = normalizedTheme.surfaceVariantColor;
     model.avatarUrl = String(settings.avatarUrl || "");
     model.invitesEnabled = settings.invitesEnabled !== false;
     model.invitesAvailable = settings.invitesAvailable !== false;
@@ -218,6 +295,9 @@ const addEdit = useAddEdit({
   buildRawPayload: (model) => ({
     name: model.name,
     color: model.color,
+    secondaryColor: model.secondaryColor,
+    surfaceColor: model.surfaceColor,
+    surfaceVariantColor: model.surfaceVariantColor,
     avatarUrl: model.avatarUrl,
     invitesEnabled: model.invitesEnabled
   }),

package/src/client/composables/modelStateHelpers.js

@@ -1,3 +1,5 @@
+import { watch } from "vue";
+
 function isObjectLike(value) {
   return value !== null && typeof value === "object";
 }
@@ -43,7 +45,46 @@ function restoreModelSnapshot(model, snapshot) {
   }
 }
 
+function watchResourceModelState({
+  resource,
+  model,
+  mapLoadedToModel,
+  resolveMapContext = null
+} = {}) {
+  const modelSnapshot = captureModelSnapshot(model);
+
+  watch(
+    () => resource?.query?.isPending?.value,
+    (isPending) => {
+      if (!isPending || !modelSnapshot) {
+        return;
+      }
+
+      restoreModelSnapshot(model, modelSnapshot);
+    },
+    {
+      immediate: true
+    }
+  );
+
+  watch(
+    () => resource?.data?.value,
+    (payload) => {
+      if (!payload || typeof mapLoadedToModel !== "function") {
+        return;
+      }
+
+      const context = typeof resolveMapContext === "function" ? resolveMapContext() : {};
+      mapLoadedToModel(model, payload, context);
+    },
+    {
+      immediate: true
+    }
+  );
+}
+
 export {
   captureModelSnapshot,
-  restoreModelSnapshot
+  restoreModelSnapshot,
+  watchResourceModelState
 };

package/src/client/composables/useAddEditCore.js

@@ -1,8 +1,7 @@
-import { watch } from "vue";
 import { useQueryClient } from "@tanstack/vue-query";
 import { resolveFieldErrors } from "@jskit-ai/http-runtime/client";
 import { validateOperationInput } from "./operationValidationHelpers.js";
-import { captureModelSnapshot, restoreModelSnapshot } from "./modelStateHelpers.js";
+import { watchResourceModelState } from "./modelStateHelpers.js";
 
 function useAddEditCore({
   model,
@@ -19,37 +18,17 @@ function useAddEditCore({
   messages = {}
 } = {}) {
   const queryClient = useQueryClient();
-  const modelSnapshot = captureModelSnapshot(model);
-
-  watch(
-    () => resource?.query?.isPending?.value,
-    (isPending) => {
-      if (!isPending || !modelSnapshot) {
-        return;
-      }
-
-      restoreModelSnapshot(model, modelSnapshot);
-    },
-    {
-      immediate: true
-    }
-  );
-
-  watch(
-    () => resource?.data?.value,
-    (payload) => {
-      if (!payload || typeof mapLoadedToModel !== "function") {
-        return;
-      }
-      mapLoadedToModel(model, payload, {
+  watchResourceModelState({
+    resource,
+    model,
+    mapLoadedToModel,
+    resolveMapContext() {
+      return {
         queryClient,
         resource
-      });
-    },
-    {
-      immediate: true
+      };
     }
-  );
+  });
 
   const saving = resource?.isSaving;
   const fieldErrors = fieldBag?.errors;

package/src/client/composables/useViewCore.js

@@ -1,5 +1,5 @@
-import { computed, watch } from "vue";
-import { captureModelSnapshot, restoreModelSnapshot } from "./modelStateHelpers.js";
+import { computed } from "vue";
+import { watchResourceModelState } from "./modelStateHelpers.js";
 
 function normalizeStatusList(value) {
   if (Array.isArray(value)) {
@@ -18,37 +18,16 @@ function useViewCore({
   notFoundMessage = "Record not found."
 } = {}) {
   const statusList = normalizeStatusList(notFoundStatuses);
-  const modelSnapshot = captureModelSnapshot(model);
-
-  watch(
-    () => resource?.query?.isPending?.value,
-    (isPending) => {
-      if (!isPending || !modelSnapshot) {
-        return;
-      }
-
-      restoreModelSnapshot(model, modelSnapshot);
-    },
-    {
-      immediate: true
-    }
-  );
-
-  watch(
-    () => resource?.data?.value,
-    (payload) => {
-      if (!payload || typeof mapLoadedToModel !== "function") {
-        return;
-      }
-
-      mapLoadedToModel(model, payload, {
+  watchResourceModelState({
+    resource,
+    model,
+    mapLoadedToModel,
+    resolveMapContext() {
+      return {
         resource
-      });
-    },
-    {
-      immediate: true
+      };
     }
-  );
+  });
 
   const data = resource?.data;
   const record = computed(() => (model !== undefined ? model : data?.value));

package/src/client/lib/bootstrap.js

@@ -26,6 +26,9 @@ function normalizeWorkspaceEntry(entry) {
     slug,
     name: String(entry.name || slug).trim() || slug,
     color: String(entry.color || "").trim(),
+    secondaryColor: String(entry.secondaryColor || "").trim(),
+    surfaceColor: String(entry.surfaceColor || "").trim(),
+    surfaceVariantColor: String(entry.surfaceVariantColor || "").trim(),
     avatarUrl: String(entry.avatarUrl || "").trim(),
     roleId: String(entry.roleId || "member").trim().toLowerCase() || "member",
     isAccessible: entry.isAccessible !== false

package/src/client/lib/menuIcons.js

@@ -16,6 +16,7 @@ import {
   mdiViewListOutline
 } from "@mdi/js";
 import { isExternalLinkTarget, splitPathQueryHash } from "@jskit-ai/kernel/shared/support/linkPath";
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
 import { normalizePathname as normalizeKernelPathname } from "@jskit-ai/kernel/shared/surface/paths";
 
 const SURFACE_SWITCH_ICON_BY_ID = Object.freeze({
@@ -25,10 +26,6 @@ const SURFACE_SWITCH_ICON_BY_ID = Object.freeze({
   console: mdiConsoleNetworkOutline
 });
 
-function normalizeText(value) {
-  return String(value || "").trim();
-}
-
 function normalizePathname(value) {
   const normalizedValue = normalizeText(value);
   if (!normalizedValue) {

package/src/client/lib/theme.js

@@ -1,8 +1,12 @@
 import { ThemeSymbol } from "vuetify/lib/composables/theme.js";
+import { resolveWorkspaceThemePalette } from "@jskit-ai/users-core/shared/settings";
 
 const THEME_PREFERENCE_LIGHT = "light";
 const THEME_PREFERENCE_DARK = "dark";
 const THEME_PREFERENCE_SYSTEM = "system";
+const HEX_COLOR_PATTERN = /^#[0-9A-Fa-f]{6}$/;
+const WORKSPACE_THEME_NAME_LIGHT = "workspace-light";
+const WORKSPACE_THEME_NAME_DARK = "workspace-dark";
 
 function normalizeThemePreference(value) {
   const normalized = String(value || "").trim().toLowerCase();
@@ -89,11 +93,171 @@ function setVuetifyThemeName(themeController, themeName) {
   return true;
 }
 
+function normalizeHexColor(value = "") {
+  const normalized = String(value || "").trim();
+  if (!HEX_COLOR_PATTERN.test(normalized)) {
+    return "";
+  }
+  return normalized.toUpperCase();
+}
+
+function hexColorToRgb(value = "") {
+  const normalized = normalizeHexColor(value);
+  if (!normalized) {
+    return "";
+  }
+
+  const red = Number.parseInt(normalized.slice(1, 3), 16);
+  const green = Number.parseInt(normalized.slice(3, 5), 16);
+  const blue = Number.parseInt(normalized.slice(5, 7), 16);
+  return `${red},${green},${blue}`;
+}
+
+function resolveVuetifyThemeDefinitions(themeController) {
+  if (!themeController || typeof themeController !== "object") {
+    return null;
+  }
+  const themes = themeController.themes?.value;
+  if (!themes || typeof themes !== "object") {
+    return null;
+  }
+  return themes;
+}
+
+function normalizeThemeColors(colors) {
+  const source = colors && typeof colors === "object" ? colors : {};
+  const normalized = {};
+  for (const [key, value] of Object.entries(source)) {
+    normalized[String(key)] = String(value);
+  }
+  return normalized;
+}
+
+function normalizeWorkspaceBaseThemeName(themeName = "") {
+  const normalized = String(themeName || "").trim().toLowerCase();
+  if (normalized === WORKSPACE_THEME_NAME_LIGHT) {
+    return THEME_PREFERENCE_LIGHT;
+  }
+  if (normalized === WORKSPACE_THEME_NAME_DARK) {
+    return THEME_PREFERENCE_DARK;
+  }
+  if (normalized === THEME_PREFERENCE_DARK) {
+    return THEME_PREFERENCE_DARK;
+  }
+  return THEME_PREFERENCE_LIGHT;
+}
+
+function areThemeColorsEqual(leftColors = {}, rightColors = {}) {
+  const leftEntries = Object.entries(leftColors);
+  const rightEntries = Object.entries(rightColors);
+  if (leftEntries.length !== rightEntries.length) {
+    return false;
+  }
+
+  for (const [key, value] of leftEntries) {
+    if (!Object.hasOwn(rightColors, key)) {
+      return false;
+    }
+    if (String(rightColors[key]) !== String(value)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function composeWorkspaceThemeDefinition(baseThemeDefinition, palette) {
+  const baseTheme = baseThemeDefinition && typeof baseThemeDefinition === "object" ? baseThemeDefinition : {};
+  const baseColors = normalizeThemeColors(baseTheme.colors);
+  return {
+    ...baseTheme,
+    colors: {
+      ...baseColors,
+      primary: palette.color,
+      secondary: palette.secondaryColor,
+      surface: palette.surfaceColor,
+      "surface-variant": palette.surfaceVariantColor,
+      background: palette.backgroundColor
+    }
+  };
+}
+
+function upsertThemeDefinition(themeDefinitions, themeName, nextDefinition) {
+  const currentDefinition =
+    themeDefinitions[themeName] && typeof themeDefinitions[themeName] === "object" ? themeDefinitions[themeName] : null;
+  const currentColors = normalizeThemeColors(currentDefinition?.colors);
+  const nextColors = normalizeThemeColors(nextDefinition?.colors);
+  const sameDarkFlag = Boolean(currentDefinition?.dark) === Boolean(nextDefinition?.dark);
+  if (sameDarkFlag && areThemeColorsEqual(currentColors, nextColors)) {
+    return false;
+  }
+  themeDefinitions[themeName] = nextDefinition;
+  return true;
+}
+
+function setVuetifyPrimaryColorOverride(themeController, themeInput = null) {
+  if (
+    !themeController ||
+    typeof themeController !== "object" ||
+    !themeController.global ||
+    !themeController.global.name
+  ) {
+    return false;
+  }
+
+  const themeDefinitions = resolveVuetifyThemeDefinitions(themeController);
+  if (!themeDefinitions) {
+    return false;
+  }
+
+  const currentThemeName = String(themeController.global.name.value || "").trim();
+  const normalizedBaseThemeName = normalizeWorkspaceBaseThemeName(currentThemeName);
+  const normalizedThemeName =
+    normalizedBaseThemeName === THEME_PREFERENCE_DARK ? THEME_PREFERENCE_DARK : THEME_PREFERENCE_LIGHT;
+  const source = themeInput && typeof themeInput === "object" ? themeInput : null;
+
+  if (!source) {
+    if (currentThemeName === normalizedThemeName) {
+      return false;
+    }
+    themeController.global.name.value = normalizedThemeName;
+    return true;
+  }
+
+  const baseLightTheme =
+    themeDefinitions[THEME_PREFERENCE_LIGHT] && typeof themeDefinitions[THEME_PREFERENCE_LIGHT] === "object"
+      ? themeDefinitions[THEME_PREFERENCE_LIGHT]
+      : null;
+  const baseDarkTheme =
+    themeDefinitions[THEME_PREFERENCE_DARK] && typeof themeDefinitions[THEME_PREFERENCE_DARK] === "object"
+      ? themeDefinitions[THEME_PREFERENCE_DARK]
+      : null;
+  if (!baseLightTheme || !baseDarkTheme) {
+    return false;
+  }
+
+  const palette = resolveWorkspaceThemePalette(source);
+  const nextLightTheme = composeWorkspaceThemeDefinition(baseLightTheme, palette);
+  const nextDarkTheme = composeWorkspaceThemeDefinition(baseDarkTheme, palette);
+  const nextThemeName =
+    normalizedThemeName === THEME_PREFERENCE_DARK ? WORKSPACE_THEME_NAME_DARK : WORKSPACE_THEME_NAME_LIGHT;
+
+  let changed = false;
+  changed = upsertThemeDefinition(themeDefinitions, WORKSPACE_THEME_NAME_LIGHT, nextLightTheme) || changed;
+  changed = upsertThemeDefinition(themeDefinitions, WORKSPACE_THEME_NAME_DARK, nextDarkTheme) || changed;
+  if (themeController.global.name.value !== nextThemeName) {
+    themeController.global.name.value = nextThemeName;
+    changed = true;
+  }
+
+  return changed;
+}
+
 export {
+  hexColorToRgb,
   normalizeThemePreference,
   resolveThemeNameForPreference,
   resolveBootstrapThemeName,
   resolveVuetifyThemeController,
+  setVuetifyPrimaryColorOverride,
   setVuetifyThemeName
 };
-

package/src/client/runtime/bootstrapPlacementRouteGuards.js

@@ -1,7 +1,8 @@
 import {
   resolveSurfaceDefinitionFromPlacementContext,
   resolveSurfaceIdFromPlacementPathname,
-  resolveSurfaceRootPathFromPlacementContext
+  resolveSurfaceRootPathFromPlacementContext,
+  resolveRuntimePathname
 } from "@jskit-ai/shell-web/client/placement";
 import {
   extractWorkspaceSlugFromSurfacePathname,
@@ -17,7 +18,6 @@ import {
 } from "./bootstrapPlacementRuntimeConstants.js";
 import {
   isGuardDenied,
-  normalizeGuardPathname,
   normalizeSearch,
   normalizeWorkspaceBootstrapStatus,
   normalizeWorkspaceSlugKey,
@@ -36,7 +36,7 @@ function createBootstrapPlacementRouteGuards({
 
   function resolveNormalizedSurfaceState(pathname = "/", search = "") {
     const context = placementRuntime.getContext();
-    const normalizedPathname = normalizeGuardPathname(pathname);
+    const normalizedPathname = resolveRuntimePathname(pathname);
     const normalizedSearch = normalizeSearch(search);
     const surfaceId = String(resolveSurfaceIdFromPlacementPathname(context, normalizedPathname) || "")
       .trim()
@@ -77,7 +77,7 @@ function createBootstrapPlacementRouteGuards({
       search: surfaceState.normalizedSearch,
       surfaceId: surfaceState.surfaceId,
       workspaceSlug,
-      workspaceRootPath: normalizeGuardPathname(
+      workspaceRootPath: resolveRuntimePathname(
         resolveSurfaceWorkspacePathFromPlacementContext(surfaceState.context, surfaceState.surfaceId, workspaceSlug, "/")
       ),
       workspaceBootstrapStatus: String(getWorkspaceBootstrapStatus(workspaceSlug) || "")
@@ -126,12 +126,12 @@ function createBootstrapPlacementRouteGuards({
       if (!fallbackWorkspaceSlug) {
         return "/";
       }
-      return normalizeGuardPathname(
+      return resolveRuntimePathname(
         resolveSurfaceWorkspacePathFromPlacementContext(context, fallbackSurfaceId, fallbackWorkspaceSlug, "/")
       );
     }
 
-    const fallbackPath = normalizeGuardPathname(resolveSurfaceRootPathFromPlacementContext(context, fallbackSurfaceId));
+    const fallbackPath = resolveRuntimePathname(resolveSurfaceRootPathFromPlacementContext(context, fallbackSurfaceId));
     if (fallbackPath.includes(":")) {
       return "/";
     }
@@ -214,7 +214,7 @@ function createBootstrapPlacementRouteGuards({
 
     const currentRoute = router.currentRoute?.value || {};
     const currentFullPath = String(currentRoute.fullPath || "").trim();
-    const currentPath = normalizeGuardPathname(currentRoute.path || "/");
+    const currentPath = resolveRuntimePathname(currentRoute.path || "/");
     const currentComparablePath = currentFullPath || currentPath;
     if (currentComparablePath === normalizedTargetPath) {
       return;
@@ -233,7 +233,7 @@ function createBootstrapPlacementRouteGuards({
     }
 
     const currentRoute = router.currentRoute?.value || {};
-    const currentPath = normalizeGuardPathname(currentRoute.path || "/");
+    const currentPath = resolveRuntimePathname(currentRoute.path || "/");
     const currentSearch = resolveSearchFromFullPath(currentRoute.fullPath || "");
     const workspaceState = resolveWorkspaceRouteState(currentPath, currentSearch);
     if (!workspaceState || workspaceState.workspaceSlug !== normalizedWorkspaceSlug) {
@@ -260,7 +260,7 @@ function createBootstrapPlacementRouteGuards({
     }
 
     const currentRoute = router.currentRoute?.value || {};
-    const currentPath = normalizeGuardPathname(currentRoute.path || "/");
+    const currentPath = resolveRuntimePathname(currentRoute.path || "/");
     const currentSearch = resolveSearchFromFullPath(currentRoute.fullPath || "");
     const surfaceDecision = resolveSurfaceAccessGuardDecision(currentPath, currentSearch, {
       allowOnUnknown: false
@@ -299,7 +299,7 @@ function createBootstrapPlacementRouteGuards({
         return baseOutcome;
       }
 
-      const pathname = normalizeGuardPathname(context?.location?.pathname || context?.to?.path || "/");
+      const pathname = resolveRuntimePathname(context?.location?.pathname || context?.to?.path || "/");
       const search = normalizeSearch(context?.location?.search || resolveSearchFromFullPath(context?.to?.fullPath || ""));
       const workspaceDecision = resolveWorkspaceGuardDecision(pathname, search);
       if (workspaceDecision) {

package/src/client/runtime/bootstrapPlacementRuntime.js

@@ -13,6 +13,7 @@ import {
 import { normalizePermissionList } from "../lib/permissions.js";
 import {
   resolveBootstrapThemeName,
+  setVuetifyPrimaryColorOverride,
   resolveVuetifyThemeController,
   setVuetifyThemeName
 } from "../lib/theme.js";
@@ -132,6 +133,10 @@ function createBootstrapPlacementRuntime({ app, logger = null, fetchBootstrap =
   function writePlacementContext(payload = {}, state = {}, source = BOOTSTRAP_PLACEMENT_SOURCE) {
     const availableWorkspaces = normalizeWorkspaceList(payload?.workspaces);
     const currentWorkspace = findWorkspaceBySlug(availableWorkspaces, state.workspaceSlug);
+    const workspaceSettings =
+      payload?.workspaceSettings && typeof payload.workspaceSettings === "object"
+        ? payload.workspaceSettings
+        : null;
     const permissions = normalizePermissionList(payload?.permissions);
     const user = resolvePlacementUserFromBootstrapPayload(payload, state.context?.user);
     const workspaceInvitesEnabled = payload?.app?.features?.workspaceInvites === true;
@@ -140,6 +145,7 @@ function createBootstrapPlacementRuntime({ app, logger = null, fetchBootstrap =
     placementRuntime.setContext(
       {
         workspace: currentWorkspace,
+        workspaceSettings,
         workspaces: availableWorkspaces,
         permissions,
         user,
@@ -152,12 +158,14 @@ function createBootstrapPlacementRuntime({ app, logger = null, fetchBootstrap =
       }
     );
     routeGuards.enforceSurfaceAccessForCurrentRoute();
+    applyWorkspaceColorFromPlacementContext("write");
   }
 
   function clearPlacementContext(source = BOOTSTRAP_PLACEMENT_SOURCE) {
     placementRuntime.setContext(
       {
         workspace: null,
+        workspaceSettings: null,
         workspaces: [],
         permissions: [],
         user: null,
@@ -170,6 +178,7 @@ function createBootstrapPlacementRuntime({ app, logger = null, fetchBootstrap =
       }
     );
     routeGuards.enforceSurfaceAccessForCurrentRoute();
+    applyWorkspaceColorFromPlacementContext("clear");
   }
 
   function getVuetifyThemeController() {
@@ -204,6 +213,52 @@ function createBootstrapPlacementRuntime({ app, logger = null, fetchBootstrap =
     }
   }
 
+  function resolveWorkspaceThemeForCurrentRoute() {
+    const routeState = resolveRouteState(placementRuntime, router);
+    if (!routeState.workspaceSlug) {
+      return null;
+    }
+
+    const context = placementRuntime.getContext();
+    const workspaceSettings =
+      context?.workspaceSettings && typeof context.workspaceSettings === "object"
+        ? context.workspaceSettings
+        : null;
+    if (workspaceSettings) {
+      return workspaceSettings;
+    }
+
+    const workspace = context?.workspace && typeof context.workspace === "object" ? context.workspace : null;
+    if (!workspace) {
+      return null;
+    }
+    const workspaceSlug = normalizeWorkspaceSlugKey(workspace.slug);
+    if (!workspaceSlug || workspaceSlug !== normalizeWorkspaceSlugKey(routeState.workspaceSlug)) {
+      return null;
+    }
+
+    return workspace;
+  }
+
+  function applyWorkspaceColorFromPlacementContext(reason = "manual") {
+    const themeController = getVuetifyThemeController();
+    if (!themeController) {
+      return;
+    }
+    try {
+      const workspaceTheme = resolveWorkspaceThemeForCurrentRoute();
+      setVuetifyPrimaryColorOverride(themeController, workspaceTheme);
+    } catch (error) {
+      runtimeLogger.warn(
+        {
+          reason,
+          error: String(error?.message || error || "unknown error")
+        },
+        "users-web bootstrap workspace color apply failed."
+      );
+    }
+  }
+
   async function refresh(reason = "manual") {
     if (shutdownRequested) {
       return;
@@ -220,6 +275,7 @@ function createBootstrapPlacementRuntime({ app, logger = null, fetchBootstrap =
 
       writePlacementContext(payload, stateAtStart, source);
       applyThemeFromBootstrapPayload(payload, reason);
+      applyWorkspaceColorFromPlacementContext(reason);
       if (stateAtStart.workspaceSlug) {
         const sessionAuthenticated = payload?.session?.authenticated === true;
         if (!sessionAuthenticated) {
@@ -321,6 +377,7 @@ function createBootstrapPlacementRuntime({ app, logger = null, fetchBootstrap =
         }
       }, "init");
     }
+    applyWorkspaceColorFromPlacementContext("init");
 
     if (typeof placementRuntime.subscribe === "function") {
       const unsubscribePlacement = placementRuntime.subscribe((event = {}) => {
@@ -329,6 +386,7 @@ function createBootstrapPlacementRuntime({ app, logger = null, fetchBootstrap =
         }
 
         const nextContext = placementRuntime.getContext();
+        applyWorkspaceColorFromPlacementContext("context");
         const nextSignature = resolveAuthSignature(nextContext);
         if (nextSignature === authSignature) {
           return;

package/src/client/runtime/bootstrapPlacementRuntimeHelpers.js

@@ -1,3 +1,6 @@
+import {
+  createProviderLogger as createSharedProviderLogger
+} from "@jskit-ai/kernel/shared/support/providerLogger";
 import {
   resolveRuntimePathname,
   resolveSurfaceIdFromPlacementPathname
@@ -12,15 +15,7 @@ import {
 import { WORKSPACE_BOOTSTRAP_STATUSES } from "./bootstrapPlacementRuntimeConstants.js";
 
 function createProviderLogger(app) {
-  return Object.freeze({
-    warn: (...args) => {
-      if (app && typeof app.warn === "function") {
-        app.warn(...args);
-        return;
-      }
-      console.warn(...args);
-    }
-  });
+  return createSharedProviderLogger(app);
 }
 
 function resolveRouteState(placementRuntime, router) {
@@ -60,10 +55,6 @@ function resolveSearchFromFullPath(fullPath = "") {
   return normalizeSearch(search);
 }
 
-function normalizeGuardPathname(pathname = "/") {
-  return resolveRuntimePathname(pathname);
-}
-
 function isGuardDenied(outcome) {
   if (outcome === false) {
     return true;
@@ -146,7 +137,6 @@ export {
   createProviderLogger,
   fetchBootstrapPayload,
   isGuardDenied,
-  normalizeGuardPathname,
   normalizeSearch,
   normalizeWorkspaceBootstrapStatus,
   normalizeWorkspaceSlugKey,

package/src/client/support/realtimeWorkspace.js

@@ -1,3 +1,5 @@
+import { unref } from "vue";
+
 function matchesCurrentWorkspaceEvent(payload = {}, workspaceSlug = "") {
   const payloadWorkspaceSlug = String(payload?.workspaceSlug || "").trim();
   if (!payloadWorkspaceSlug) {
@@ -7,6 +9,13 @@ function matchesCurrentWorkspaceEvent(payload = {}, workspaceSlug = "") {
   return payloadWorkspaceSlug === String(workspaceSlug || "").trim();
 }
 
+function createWorkspaceRealtimeMatcher(workspaceSlugRef) {
+  return function matchesWorkspaceRealtimeEvent({ payload = {} } = {}) {
+    return matchesCurrentWorkspaceEvent(payload, unref(workspaceSlugRef));
+  };
+}
+
 export {
-  matchesCurrentWorkspaceEvent
+  matchesCurrentWorkspaceEvent,
+  createWorkspaceRealtimeMatcher
 };

package/test/bootstrapPlacementRuntime.test.js

@@ -7,6 +7,7 @@ import {
 import { WEB_PLACEMENT_RUNTIME_CLIENT_TOKEN } from "@jskit-ai/shell-web/client/placement";
 import { REALTIME_SOCKET_CLIENT_TOKEN } from "@jskit-ai/realtime/client/tokens";
 import { USERS_BOOTSTRAP_CHANGED_EVENT } from "@jskit-ai/users-core/shared/events/usersEvents";
+import { resolveWorkspaceThemePalette } from "@jskit-ai/users-core/shared/settings";
 import { ThemeSymbol } from "vuetify/lib/composables/theme.js";
 import {
   WORKSPACE_BOOTSTRAP_STATUS_FORBIDDEN,
@@ -199,6 +200,30 @@ function createVuetifyThemeController(initial = "light") {
       name: {
         value: initial
       }
+    },
+    themes: {
+      value: {
+        light: {
+          dark: false,
+          colors: {
+            primary: "#0f6b54",
+            secondary: "#3f5150",
+            background: "#eef3ee",
+            surface: "#f7fbf6",
+            "surface-variant": "#dfe8df"
+          }
+        },
+        dark: {
+          dark: true,
+          colors: {
+            primary: "#6fd0b5",
+            secondary: "#9db2af",
+            background: "#0f1715",
+            surface: "#16211e",
+            "surface-variant": "#253430"
+          }
+        }
+      }
     }
   };
 }
@@ -515,10 +540,62 @@ test("bootstrap placement runtime reapplies theme when bootstrap payload changes
   });
 
   await runtime.initialize();
-  assert.equal(themeController.global.name.value, "dark");
+  assert.equal(themeController.global.name.value, "workspace-dark");
 
   socket.emit(USERS_BOOTSTRAP_CHANGED_EVENT, {});
   await flushTasks();
+  assert.equal(themeController.global.name.value, "workspace-light");
+});
+
+test("bootstrap placement runtime applies workspace palette via Vuetify workspace themes and clears it off workspace routes", async () => {
+  const placementRuntime = createPlacementRuntimeStub();
+  const router = createRouterStub("/w/acme/dashboard");
+  const themeController = createVuetifyThemeController("light");
+  const runtime = createBootstrapPlacementRuntime({
+    app: createAppStub({
+      [WEB_PLACEMENT_RUNTIME_CLIENT_TOKEN]: placementRuntime,
+      [CLIENT_MODULE_ROUTER_TOKEN]: router,
+      [CLIENT_MODULE_VUE_APP_TOKEN]: createVueAppWithThemeController(themeController)
+    }),
+    fetchBootstrap: async (workspaceSlug) => {
+      return {
+        session: {
+          authenticated: true,
+          userId: 1
+        },
+        workspaces: [
+          {
+            id: 1,
+            slug: "acme",
+            name: "Acme Workspace",
+            color: "#CC3344"
+          }
+        ],
+        permissions: []
+      };
+    }
+  });
+
+  await runtime.initialize();
+  const palette = resolveWorkspaceThemePalette({
+    color: "#CC3344"
+  });
+  assert.equal(themeController.global.name.value, "workspace-light");
+  assert.equal(themeController.themes.value["workspace-light"].colors.primary, palette.color);
+  assert.equal(themeController.themes.value["workspace-light"].colors.secondary, palette.secondaryColor);
+  assert.equal(themeController.themes.value["workspace-light"].colors.surface, palette.surfaceColor);
+  assert.equal(
+    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";
+  router.emitAfterEach();
+  await flushTasks();
+  await flushTasks();
+
   assert.equal(themeController.global.name.value, "light");
 });
 

package/test/theme.test.js

@@ -1,14 +1,51 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { ThemeSymbol } from "vuetify/lib/composables/theme.js";
+import { resolveWorkspaceThemePalette } from "@jskit-ai/users-core/shared/settings";
 import {
+  hexColorToRgb,
   normalizeThemePreference,
   resolveThemeNameForPreference,
   resolveBootstrapThemeName,
   resolveVuetifyThemeController,
+  setVuetifyPrimaryColorOverride,
   setVuetifyThemeName
 } from "../src/client/lib/theme.js";
 
+function createVuetifyThemeController(initialTheme = "light") {
+  return {
+    global: {
+      name: {
+        value: initialTheme
+      }
+    },
+    themes: {
+      value: {
+        light: {
+          dark: false,
+          colors: {
+            primary: "#0f6b54",
+            secondary: "#3f5150",
+            background: "#eef3ee",
+            surface: "#f7fbf6",
+            "surface-variant": "#dfe8df"
+          }
+        },
+        dark: {
+          dark: true,
+          colors: {
+            primary: "#6fd0b5",
+            secondary: "#9db2af",
+            background: "#0f1715",
+            surface: "#16211e",
+            "surface-variant": "#253430"
+          }
+        }
+      }
+    }
+  };
+}
+
 test("normalizeThemePreference accepts known preferences and falls back to system", () => {
   assert.equal(normalizeThemePreference("light"), "light");
   assert.equal(normalizeThemePreference(" DARK "), "dark");
@@ -60,13 +97,7 @@ test("resolveBootstrapThemeName uses authenticated user preference", () => {
 });
 
 test("resolveVuetifyThemeController reads theme controller from Vue app provides", () => {
-  const themeController = {
-    global: {
-      name: {
-        value: "light"
-      }
-    }
-  };
+  const themeController = createVuetifyThemeController("light");
   const vueApp = {
     _context: {
       provides: {
@@ -80,16 +111,44 @@ test("resolveVuetifyThemeController reads theme controller from Vue app provides
 });
 
 test("setVuetifyThemeName updates only when the value changes", () => {
-  const themeController = {
-    global: {
-      name: {
-        value: "light"
-      }
-    }
-  };
+  const themeController = createVuetifyThemeController("light");
 
   assert.equal(setVuetifyThemeName(themeController, "light"), false);
   assert.equal(setVuetifyThemeName(themeController, "dark"), true);
   assert.equal(themeController.global.name.value, "dark");
 });
 
+test("hexColorToRgb returns Vuetify rgb tuple and rejects invalid values", () => {
+  assert.equal(hexColorToRgb("#0f6b54"), "15,107,84");
+  assert.equal(hexColorToRgb("#CC3344"), "204,51,68");
+  assert.equal(hexColorToRgb("invalid"), "");
+});
+
+test("setVuetifyPrimaryColorOverride mutates workspace themes and restores base theme names", () => {
+  const themeController = createVuetifyThemeController("light");
+  const expectedPalette = resolveWorkspaceThemePalette({
+    color: "#CC3344"
+  });
+
+  assert.equal(setVuetifyPrimaryColorOverride(themeController, { color: "#CC3344" }), 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["surface-variant"],
+    expectedPalette.surfaceVariantColor
+  );
+  assert.equal(themeController.themes.value["workspace-light"].colors.background, expectedPalette.backgroundColor);
+
+  assert.equal(setVuetifyPrimaryColorOverride(themeController, { color: "#CC3344" }), false);
+
+  assert.equal(setVuetifyThemeName(themeController, "dark"), true);
+  assert.equal(setVuetifyPrimaryColorOverride(themeController, { color: "#CC3344" }), true);
+  assert.equal(themeController.global.name.value, "workspace-dark");
+  assert.equal(themeController.themes.value["workspace-dark"].colors.primary, expectedPalette.color);
+
+  assert.equal(setVuetifyPrimaryColorOverride(themeController, null), true);
+  assert.equal(themeController.global.name.value, "dark");
+  assert.equal(setVuetifyPrimaryColorOverride(themeController, null), false);
+});