From 247d57887a694af1dd2fe1825cf387a2eee7b7bb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 24 Oct 2024 09:07:36 +0100
Subject: [PATCH 1/8] Remove lightest and dark themes, use enums for themes,
 standardise naming

---
 .../commandPalette/CommandPalette.svelte      |  4 +-
 .../src/components/settings/ThemeModal.svelte |  4 +-
 .../_components/Screen/AppThemeSelect.svelte  | 15 +++---
 .../builder/portal/apps/[appId]/index.svelte  |  9 ++--
 packages/builder/src/stores/builder/theme.js  | 14 +++---
 packages/builder/src/stores/portal/theme.js   | 46 +++++++++----------
 .../client/src/components/ClientApp.svelte    |  8 +++-
 packages/client/src/stores/theme.js           |  7 ++-
 packages/frontend-core/src/constants.js       | 32 +++++++------
 packages/frontend-core/src/utils/theme.js     | 45 ++++++++++++++----
 10 files changed, 107 insertions(+), 77 deletions(-)

diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index f48fdf4929..a8b4dedbdb 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -141,13 +141,13 @@
       icon: "ShareAndroid",
       action: () => $goto(`./automation/${automation._id}`),
     })) ?? []),
-    ...Constants.Themes.map(theme => ({
+    ...Constants.ThemeOptions.map(theme => ({
       type: "Change Builder Theme",
       name: theme.name,
       icon: "ColorPalette",
       action: () =>
         themeStore.update(state => {
-          state.theme = theme.class
+          state.theme = theme.id
           return state
         }),
     })),
diff --git a/packages/builder/src/components/settings/ThemeModal.svelte b/packages/builder/src/components/settings/ThemeModal.svelte
index cd1649fcb4..eb63a49b02 100644
--- a/packages/builder/src/components/settings/ThemeModal.svelte
+++ b/packages/builder/src/components/settings/ThemeModal.svelte
@@ -6,10 +6,10 @@
 
 <ModalContent title="Theme">
   <Select
-    options={Constants.Themes}
+    options={Constants.ThemeOptions}
     bind:value={$themeStore.theme}
     placeholder={null}
     getOptionLabel={x => x.name}
-    getOptionValue={x => x.class}
+    getOptionValue={x => x.id}
   />
 </ModalContent>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
index 75a7598a60..1185236924 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
@@ -1,11 +1,11 @@
 <script>
   import { notifications } from "@budibase/bbui"
   import { themeStore, appStore } from "stores/builder"
-  import { Constants } from "@budibase/frontend-core"
+  import { Constants, getThemeClassNames } from "@budibase/frontend-core"
 
   const onChangeTheme = async theme => {
     try {
-      await themeStore.save(`spectrum--${theme}`, $appStore.appId)
+      await themeStore.save(theme, $appStore.appId)
     } catch (error) {
       notifications.error("Error updating theme")
     }
@@ -15,16 +15,13 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container">
-  {#each Constants.Themes as theme}
+  {#each Constants.ThemeOptions as theme}
     <div
       class="theme"
-      class:selected={`spectrum--${theme.class}` === $themeStore.theme}
-      on:click={() => onChangeTheme(theme.class)}
+      class:selected={theme.id === $themeStore.theme}
+      on:click={() => onChangeTheme(theme.id)}
     >
-      <div
-        style="background: {theme.preview}"
-        class="color spectrum--{theme.class}"
-      />
+      <div class="color {getThemeClassNames(theme.id)}" />
       {theme.name}
     </div>
   {/each}
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
index f5f410f6d9..f836944acb 100644
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
@@ -21,7 +21,10 @@
   import { sdk } from "@budibase/shared-core"
   import { API } from "api"
   import ErrorSVG from "./ErrorSVG.svelte"
-  import { getBaseTheme, ClientAppSkeleton } from "@budibase/frontend-core"
+  import {
+    ClientAppSkeleton,
+    getThemeClassNames,
+  } from "@budibase/frontend-core"
   import { contextMenuStore } from "stores/builder"
 
   $: app = $enrichedApps.find(app => app.appId === $params.appId)
@@ -163,9 +166,7 @@
       class:hide={!loading || !app?.features?.skeletonLoader}
       class="loading"
     >
-      <div
-        class={`loadingThemeWrapper ${getBaseTheme(app.theme)} ${app.theme}`}
-      >
+      <div class="loadingThemeWrapper {getThemeClassNames(app.theme)}">
         <ClientAppSkeleton
           noAnimation
           hideDevTools={app?.status === "published"}
diff --git a/packages/builder/src/stores/builder/theme.js b/packages/builder/src/stores/builder/theme.js
index efa2609b97..6a06eda1ce 100644
--- a/packages/builder/src/stores/builder/theme.js
+++ b/packages/builder/src/stores/builder/theme.js
@@ -1,24 +1,24 @@
 import { writable, get } from "svelte/store"
 import { API } from "api"
-import { getBaseTheme } from "@budibase/frontend-core"
+import { Constants, ensureValidTheme } from "@budibase/frontend-core"
 
+const DefaultAppTheme = Constants.Themes.Light
 const INITIAL_THEMES_STATE = {
-  theme: "",
+  theme: DefaultAppTheme,
   customTheme: {},
 }
 
-export const themes = () => {
+export const createThemeStore = () => {
   const store = writable({
     ...INITIAL_THEMES_STATE,
   })
 
   const syncAppTheme = app => {
     store.update(state => {
-      const theme = app.theme || "spectrum--light"
+      const theme = ensureValidTheme(app.theme, DefaultAppTheme)
       return {
         ...state,
         theme,
-        baseTheme: getBaseTheme(theme),
         customTheme: app.customTheme,
       }
     })
@@ -51,7 +51,7 @@ export const themes = () => {
     const { theme, customTheme } = metadata
     store.update(state => ({
       ...state,
-      theme,
+      theme: ensureValidTheme(theme, DefaultAppTheme),
       customTheme,
     }))
   }
@@ -66,4 +66,4 @@ export const themes = () => {
   }
 }
 
-export const themeStore = themes()
+export const themeStore = createThemeStore()
diff --git a/packages/builder/src/stores/portal/theme.js b/packages/builder/src/stores/portal/theme.js
index 619eb74f6a..6f204849d0 100644
--- a/packages/builder/src/stores/portal/theme.js
+++ b/packages/builder/src/stores/portal/theme.js
@@ -1,38 +1,36 @@
-import { Constants, createLocalStorageStore } from "@budibase/frontend-core"
+import {
+  Constants,
+  createLocalStorageStore,
+  ensureValidTheme,
+  getThemeClassNames,
+} from "@budibase/frontend-core"
+import { derived } from "svelte/store"
 
 export const getThemeStore = () => {
+  const defaultBuilderTheme = Constants.Themes.Darkest
   const themeElement = document.documentElement
-
   const initialValue = {
-    theme: "darkest",
+    theme: defaultBuilderTheme,
   }
   const store = createLocalStorageStore("bb-theme", initialValue)
+  const derivedStore = derived(store, $store => ({
+    ...$store,
+    theme: ensureValidTheme($store.theme, defaultBuilderTheme),
+  }))
 
   // Update theme class when store changes
-  store.subscribe(state => {
-    // Handle any old local storage values - this can be removed after the update
-    if (state.darkMode !== undefined) {
-      store.set(initialValue)
-      return
-    }
-
-    // Update global class names to use the new theme and remove others
-    Constants.Themes.forEach(option => {
-      themeElement.classList.toggle(
-        `spectrum--${option.class}`,
-        option.class === state.theme
-      )
+  derivedStore.subscribe(({ theme }) => {
+    const classNames = getThemeClassNames(theme).split(" ")
+    Constants.ThemeOptions.forEach(option => {
+      const className = `${Constants.ThemeClassPrefix}${option.id}`
+      themeElement.classList.toggle(className, classNames.includes(className))
     })
-
-    // Add base theme if required
-    const selectedTheme = Constants.Themes.find(x => x.class === state.theme)
-    if (selectedTheme?.base) {
-      themeElement.classList.add(`spectrum--${selectedTheme.base}`)
-    }
   })
 
-  return store
+  return {
+    ...store,
+    subscribe: derivedStore.subscribe,
+  }
 }
 
-// ?? confusion
 export const themeStore = getThemeStore()
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index f1e4f10403..654e951061 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -3,7 +3,11 @@
   import { setContext, onMount } from "svelte"
   import { Layout, Heading, Body } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg"
-  import { Constants, CookieUtils } from "@budibase/frontend-core"
+  import {
+    Constants,
+    CookieUtils,
+    getThemeClassNames,
+  } from "@budibase/frontend-core"
   import Component from "./Component.svelte"
   import SDK from "sdk"
   import {
@@ -154,7 +158,7 @@
     id="spectrum-root"
     lang="en"
     dir="ltr"
-    class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
+    class="spectrum spectrum--medium {getThemeClassNames($themeStore.theme)}"
     class:builder={$builderStore.inBuilder}
     class:show={fontsLoaded && dataLoaded}
   >
diff --git a/packages/client/src/stores/theme.js b/packages/client/src/stores/theme.js
index 50dad12fa4..dde387ba9a 100644
--- a/packages/client/src/stores/theme.js
+++ b/packages/client/src/stores/theme.js
@@ -1,12 +1,12 @@
 import { derived } from "svelte/store"
 import { appStore } from "./app"
 import { builderStore } from "./builder"
-import { getBaseTheme } from "@budibase/frontend-core"
+import { Constants, ensureValidTheme } from "@budibase/frontend-core"
 
 // This is the good old acorn bug where having the word "g l o b a l" makes it
 // think that this is not ES6 compatible and starts throwing errors when using
 // optional chaining. Piss off acorn.
-const defaultTheme = "spectrum--light"
+const defaultTheme = Constants.Themes.Light
 const defaultCustomTheme = {
   primaryColor: "var(--spectrum-glo" + "bal-color-blue-600)",
   primaryColorHover: "var(--spectrum-glo" + "bal-color-blue-500)",
@@ -27,7 +27,7 @@ const createThemeStore = () => {
       }
 
       // Ensure theme is set
-      theme = theme || defaultTheme
+      theme = ensureValidTheme(theme, defaultTheme)
 
       // Delete and nullish keys from the custom theme
       if (customTheme) {
@@ -52,7 +52,6 @@ const createThemeStore = () => {
 
       return {
         theme,
-        baseTheme: getBaseTheme(theme),
         customTheme,
         customThemeCss,
       }
diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js
index 014b6b9579..976eab0534 100644
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.js
@@ -108,32 +108,34 @@ export const Roles = {
   CREATOR: "CREATOR",
 }
 
-export const Themes = [
+// Theming
+export const ThemeClassPrefix = "spectrum--"
+export const Themes = {
+  Lightest: "lightest",
+  Light: "light",
+  Dark: "dark",
+  Darkest: "darkest",
+  Nord: "nord",
+  Midnight: "midnight",
+}
+export const ThemeOptions = [
   {
-    class: "lightest",
-    name: "Lightest",
-  },
-  {
-    class: "light",
+    id: Themes.Light,
     name: "Light",
   },
   {
-    class: "dark",
+    id: Themes.Darkest,
     name: "Dark",
   },
   {
-    class: "darkest",
-    name: "Darkest",
-  },
-  {
-    class: "nord",
+    id: Themes.Nord,
     name: "Nord",
-    base: "darkest",
+    base: Themes.Darkest,
   },
   {
-    class: "midnight",
+    id: Themes.Midnight,
     name: "Midnight",
-    base: "darkest",
+    base: Themes.Darkest,
   },
 ]
 
diff --git a/packages/frontend-core/src/utils/theme.js b/packages/frontend-core/src/utils/theme.js
index 165f7c9782..309e6ab4a8 100644
--- a/packages/frontend-core/src/utils/theme.js
+++ b/packages/frontend-core/src/utils/theme.js
@@ -1,12 +1,41 @@
-import { Themes } from "../constants.js"
+import { Themes, ThemeOptions, ThemeClassPrefix } from "../constants.js"
 
-export const getBaseTheme = theme => {
-  if (!theme) {
-    return ""
-  }
-  let base = Themes.find(x => `spectrum--${x.class}` === theme)?.base || ""
+// Gets the CSS class names for the specified theme
+export const getThemeClassNames = theme => {
+  theme = ensureValidTheme(theme)
+  let classNames = `${ThemeClassPrefix}${theme}`
+
+  // Prefix with base class if required
+  const base = ThemeOptions.find(x => x.id === theme)?.base
   if (base) {
-    base = `spectrum--${base}`
+    classNames = `${ThemeClassPrefix}${base} ${classNames}`
   }
-  return base
+
+  return classNames
+}
+
+// Ensures a theme value is a valid option
+export const ensureValidTheme = (theme, fallback = Themes.Darkest) => {
+  // Default to darkest
+  if (!theme) {
+    return fallback
+  }
+
+  // Ensure we aren't using the spectrum prefix
+  if (theme.startsWith(ThemeClassPrefix)) {
+    theme = theme.split(ThemeClassPrefix)[1]
+  }
+
+  // Check we aren't using a deprecated theme, and migrate
+  // to the nearest valid theme if we are
+  if (!ThemeOptions.some(x => x.id === theme)) {
+    if (theme === Themes.Lightest) {
+      return Themes.Light
+    } else if (theme === Themes.Dark) {
+      return Themes.Darkest
+    } else {
+      return fallback
+    }
+  }
+  return theme
 }

From 4c112d51e6de83c12ca23767fce0ebd819e99745 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 24 Oct 2024 09:24:11 +0100
Subject: [PATCH 2/8] Move themes to shared core, add enum and type

---
 packages/frontend-core/src/constants.js       | 31 -------------------
 .../server/src/api/controllers/application.ts |  2 +-
 packages/server/src/constants/themes.ts       | 19 +++++++-----
 packages/shared-core/src/constants/themes.ts  | 25 +++++++++++++++
 packages/shared-core/src/index.ts             |  1 +
 .../theme.js => shared-core/src/themes.ts}    | 21 +++++++------
 packages/types/src/documents/app/index.ts     |  1 +
 packages/types/src/documents/app/theme.ts     | 14 +++++++++
 8 files changed, 65 insertions(+), 49 deletions(-)
 create mode 100644 packages/shared-core/src/constants/themes.ts
 rename packages/{frontend-core/src/utils/theme.js => shared-core/src/themes.ts} (61%)
 create mode 100644 packages/types/src/documents/app/theme.ts

diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js
index 976eab0534..662b086915 100644
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.js
@@ -108,37 +108,6 @@ export const Roles = {
   CREATOR: "CREATOR",
 }
 
-// Theming
-export const ThemeClassPrefix = "spectrum--"
-export const Themes = {
-  Lightest: "lightest",
-  Light: "light",
-  Dark: "dark",
-  Darkest: "darkest",
-  Nord: "nord",
-  Midnight: "midnight",
-}
-export const ThemeOptions = [
-  {
-    id: Themes.Light,
-    name: "Light",
-  },
-  {
-    id: Themes.Darkest,
-    name: "Dark",
-  },
-  {
-    id: Themes.Nord,
-    name: "Nord",
-    base: Themes.Darkest,
-  },
-  {
-    id: Themes.Midnight,
-    name: "Midnight",
-    base: Themes.Darkest,
-  },
-]
-
 export const EventPublishType = {
   ENV_VAR_UPGRADE_PANEL_OPENED: "environment_variable_upgrade_panel_opened",
 }
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index d8d9d75336..0d811208cd 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -302,7 +302,7 @@ async function performAppCreate(ctx: UserCtx<CreateAppRequest, App>) {
         navBackground: "var(--spectrum-global-color-gray-100)",
         links: [],
       },
-      theme: "spectrum--light",
+      theme: "light",
       customTheme: {
         buttonBorderRadius: "16px",
       },
diff --git a/packages/server/src/constants/themes.ts b/packages/server/src/constants/themes.ts
index 942d67f100..cc73e85621 100644
--- a/packages/server/src/constants/themes.ts
+++ b/packages/server/src/constants/themes.ts
@@ -1,5 +1,9 @@
-export const getThemeVariables = (theme: string) => {
-  if (theme === "spectrum--lightest") {
+import { ensureValidTheme } from "@budibase/shared-core"
+import { Theme } from "@budibase/types"
+
+export const getThemeVariables = (theme: Theme) => {
+  theme = ensureValidTheme(theme, Theme.LIGHT)
+  if (theme === Theme.LIGHTEST) {
     return `
       --spectrum-global-color-gray-50: rgb(255, 255, 255);
       --spectrum-global-color-gray-200: rgb(244, 244, 244);
@@ -7,16 +11,15 @@ export const getThemeVariables = (theme: string) => {
       --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
     `
   }
-  if (theme === "spectrum--light") {
+  if (theme === Theme.LIGHT) {
     return `
     --spectrum-global-color-gray-50: rgb(255, 255, 255);
     --spectrum-global-color-gray-200: rgb(234, 234, 234);
     --spectrum-global-color-gray-300: rgb(225, 225, 225);
     --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
-
     `
   }
-  if (theme === "spectrum--dark") {
+  if (theme === Theme.DARK) {
     return `
     --spectrum-global-color-gray-100: rgb(50, 50, 50);
     --spectrum-global-color-gray-200: rgb(62, 62, 62);
@@ -24,7 +27,7 @@ export const getThemeVariables = (theme: string) => {
     --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
     `
   }
-  if (theme === "spectrum--darkest") {
+  if (theme === Theme.DARKEST) {
     return `
   --spectrum-global-color-gray-100: rgb(30, 30, 30);
   --spectrum-global-color-gray-200: rgb(44, 44, 44);
@@ -32,7 +35,7 @@ export const getThemeVariables = (theme: string) => {
   --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
     `
   }
-  if (theme === "spectrum--nord") {
+  if (theme === Theme.NORD) {
     return `
     --spectrum-global-color-gray-100: #3b4252;
 
@@ -41,7 +44,7 @@ export const getThemeVariables = (theme: string) => {
   --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
     `
   }
-  if (theme === "spectrum--midnight") {
+  if (theme === Theme.MIDNIGHT) {
     return `
     --hue: 220;
     --sat: 10%;
diff --git a/packages/shared-core/src/constants/themes.ts b/packages/shared-core/src/constants/themes.ts
new file mode 100644
index 0000000000..208700f1af
--- /dev/null
+++ b/packages/shared-core/src/constants/themes.ts
@@ -0,0 +1,25 @@
+import { ThemeMeta, Theme } from "@budibase/types"
+
+export const ThemeOptions: ThemeMeta[] = [
+  {
+    id: Theme.LIGHT,
+    name: "Light",
+  },
+  {
+    // We call this dark for simplicity, but we want to use the spectrum darkest style
+    id: Theme.DARKEST,
+    name: "Dark",
+  },
+  {
+    id: Theme.NORD,
+    name: "Nord",
+    base: Theme.DARKEST,
+  },
+  {
+    id: Theme.MIDNIGHT,
+    name: "Midnight",
+    base: Theme.DARKEST,
+  },
+]
+
+export const ThemeClassPrefix = "spectrum--"
diff --git a/packages/shared-core/src/index.ts b/packages/shared-core/src/index.ts
index a26c76cd96..0833f999ee 100644
--- a/packages/shared-core/src/index.ts
+++ b/packages/shared-core/src/index.ts
@@ -4,3 +4,4 @@ export * as helpers from "./helpers"
 export * as utils from "./utils"
 export * as sdk from "./sdk"
 export * from "./table"
+export * from "./themes"
diff --git a/packages/frontend-core/src/utils/theme.js b/packages/shared-core/src/themes.ts
similarity index 61%
rename from packages/frontend-core/src/utils/theme.js
rename to packages/shared-core/src/themes.ts
index 309e6ab4a8..1d1875d4e9 100644
--- a/packages/frontend-core/src/utils/theme.js
+++ b/packages/shared-core/src/themes.ts
@@ -1,7 +1,8 @@
-import { Themes, ThemeOptions, ThemeClassPrefix } from "../constants.js"
+import { ThemeOptions, ThemeClassPrefix } from "./constants/themes"
+import { Theme } from "@budibase/types"
 
 // Gets the CSS class names for the specified theme
-export const getThemeClassNames = theme => {
+export const getThemeClassNames = (theme: Theme): string => {
   theme = ensureValidTheme(theme)
   let classNames = `${ThemeClassPrefix}${theme}`
 
@@ -15,24 +16,26 @@ export const getThemeClassNames = theme => {
 }
 
 // Ensures a theme value is a valid option
-export const ensureValidTheme = (theme, fallback = Themes.Darkest) => {
-  // Default to darkest
+export const ensureValidTheme = (
+  theme: Theme,
+  fallback: Theme = Theme.DARKEST
+): Theme => {
   if (!theme) {
     return fallback
   }
 
   // Ensure we aren't using the spectrum prefix
   if (theme.startsWith(ThemeClassPrefix)) {
-    theme = theme.split(ThemeClassPrefix)[1]
+    theme = theme.split(ThemeClassPrefix)[1] as Theme
   }
 
   // Check we aren't using a deprecated theme, and migrate
   // to the nearest valid theme if we are
   if (!ThemeOptions.some(x => x.id === theme)) {
-    if (theme === Themes.Lightest) {
-      return Themes.Light
-    } else if (theme === Themes.Dark) {
-      return Themes.Darkest
+    if (theme === Theme.LIGHTEST) {
+      return Theme.LIGHT
+    } else if (theme === Theme.DARK) {
+      return Theme.DARKEST
     } else {
       return fallback
     }
diff --git a/packages/types/src/documents/app/index.ts b/packages/types/src/documents/app/index.ts
index 2b13676ba1..bb94c3b4da 100644
--- a/packages/types/src/documents/app/index.ts
+++ b/packages/types/src/documents/app/index.ts
@@ -17,3 +17,4 @@ export * from "./component"
 export * from "./sqlite"
 export * from "./snippet"
 export * from "./rowAction"
+export * from "./theme"
diff --git a/packages/types/src/documents/app/theme.ts b/packages/types/src/documents/app/theme.ts
new file mode 100644
index 0000000000..ca5d429b5b
--- /dev/null
+++ b/packages/types/src/documents/app/theme.ts
@@ -0,0 +1,14 @@
+export enum Theme {
+  LIGHTEST = "lightest",
+  LIGHT = "light",
+  DARK = "dark",
+  DARKEST = "darkest",
+  NORD = "nord",
+  MIDNIGHT = "midnight",
+}
+
+export type ThemeMeta = {
+  id: string
+  name: string
+  base?: Theme
+}

From ab0f81824d040f4848d5bb17fd1b46f8ecd2f425 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 24 Oct 2024 09:35:55 +0100
Subject: [PATCH 3/8] Update to use new shared-core location for theme utils

---
 .../commandPalette/CommandPalette.svelte      |  7 ++++---
 .../components/integration/QueryEditor.svelte |  3 ++-
 .../src/components/settings/ThemeModal.svelte |  4 ++--
 .../_components/Screen/AppThemeSelect.svelte  | 12 ++++++------
 .../builder/portal/apps/[appId]/index.svelte  |  7 ++-----
 packages/builder/src/stores/builder/theme.js  | 11 +++--------
 packages/builder/src/stores/portal/theme.js   | 19 ++++++++++---------
 .../client/src/components/ClientApp.svelte    |  7 ++-----
 packages/client/src/stores/theme.js           |  5 ++---
 packages/frontend-core/src/utils/index.js     |  1 -
 packages/shared-core/src/constants/index.ts   |  1 +
 packages/shared-core/src/constants/themes.ts  |  7 +++++--
 12 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index a8b4dedbdb..1e9acbb7e2 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -23,6 +23,7 @@
   import { themeStore } from "stores/portal"
   import { getContext } from "svelte"
   import { Constants } from "@budibase/frontend-core"
+  import { ThemeOptions } from "@budibase/shared-core"
 
   const modalContext = getContext(Context.Modal)
   const commands = [
@@ -141,13 +142,13 @@
       icon: "ShareAndroid",
       action: () => $goto(`./automation/${automation._id}`),
     })) ?? []),
-    ...Constants.ThemeOptions.map(theme => ({
+    ...ThemeOptions.map(themeMeta => ({
       type: "Change Builder Theme",
-      name: theme.name,
+      name: themeMeta.name,
       icon: "ColorPalette",
       action: () =>
         themeStore.update(state => {
-          state.theme = theme.id
+          state.theme = themeMeta.id
           return state
         }),
     })),
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index 97998c3d22..995451b7e3 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -3,6 +3,7 @@
   import { Label } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
   import { themeStore } from "stores/portal"
+  import { Theme } from "@budibase/types"
 
   const dispatch = createEventDispatcher()
 
@@ -116,7 +117,7 @@
       readOnly,
       autoCloseBrackets: true,
       autoCloseTags: true,
-      theme: $themeStore.theme.includes("light") ? THEMES.LIGHT : THEMES.DARK,
+      theme: $themeStore.theme === Theme.LIGHT ? THEMES.LIGHT : THEMES.DARK,
     }
 
     if (!tab)
diff --git a/packages/builder/src/components/settings/ThemeModal.svelte b/packages/builder/src/components/settings/ThemeModal.svelte
index eb63a49b02..7bc3c1efa3 100644
--- a/packages/builder/src/components/settings/ThemeModal.svelte
+++ b/packages/builder/src/components/settings/ThemeModal.svelte
@@ -1,12 +1,12 @@
 <script>
   import { ModalContent, Select } from "@budibase/bbui"
   import { themeStore } from "stores/portal"
-  import { Constants } from "@budibase/frontend-core"
+  import { ThemeOptions } from "@budibase/shared-core"
 </script>
 
 <ModalContent title="Theme">
   <Select
-    options={Constants.ThemeOptions}
+    options={ThemeOptions}
     bind:value={$themeStore.theme}
     placeholder={null}
     getOptionLabel={x => x.name}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
index 1185236924..eb7a839b22 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
@@ -1,7 +1,7 @@
 <script>
   import { notifications } from "@budibase/bbui"
   import { themeStore, appStore } from "stores/builder"
-  import { Constants, getThemeClassNames } from "@budibase/frontend-core"
+  import { ThemeOptions, getThemeClassNames } from "@budibase/shared-core"
 
   const onChangeTheme = async theme => {
     try {
@@ -15,14 +15,14 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container">
-  {#each Constants.ThemeOptions as theme}
+  {#each ThemeOptions as themeMeta}
     <div
       class="theme"
-      class:selected={theme.id === $themeStore.theme}
-      on:click={() => onChangeTheme(theme.id)}
+      class:selected={themeMeta.id === $themeStore.theme}
+      on:click={() => onChangeTheme(themeMeta.id)}
     >
-      <div class="color {getThemeClassNames(theme.id)}" />
-      {theme.name}
+      <div class="color {getThemeClassNames(themeMeta.id)}" />
+      {themeMeta.name}
     </div>
   {/each}
 </div>
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
index f836944acb..cc03ec01dc 100644
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
@@ -18,13 +18,10 @@
     TooltipPosition,
     TooltipType,
   } from "@budibase/bbui"
-  import { sdk } from "@budibase/shared-core"
+  import { sdk, getThemeClassNames } from "@budibase/shared-core"
   import { API } from "api"
   import ErrorSVG from "./ErrorSVG.svelte"
-  import {
-    ClientAppSkeleton,
-    getThemeClassNames,
-  } from "@budibase/frontend-core"
+  import { ClientAppSkeleton } from "@budibase/frontend-core"
   import { contextMenuStore } from "stores/builder"
 
   $: app = $enrichedApps.find(app => app.appId === $params.appId)
diff --git a/packages/builder/src/stores/builder/theme.js b/packages/builder/src/stores/builder/theme.js
index 6a06eda1ce..8e03e856b3 100644
--- a/packages/builder/src/stores/builder/theme.js
+++ b/packages/builder/src/stores/builder/theme.js
@@ -1,16 +1,11 @@
 import { writable, get } from "svelte/store"
 import { API } from "api"
-import { Constants, ensureValidTheme } from "@budibase/frontend-core"
-
-const DefaultAppTheme = Constants.Themes.Light
-const INITIAL_THEMES_STATE = {
-  theme: DefaultAppTheme,
-  customTheme: {},
-}
+import { ensureValidTheme, DefaultAppTheme } from "@budibase/shared-core"
 
 export const createThemeStore = () => {
   const store = writable({
-    ...INITIAL_THEMES_STATE,
+    theme: DefaultAppTheme,
+    customTheme: {},
   })
 
   const syncAppTheme = app => {
diff --git a/packages/builder/src/stores/portal/theme.js b/packages/builder/src/stores/portal/theme.js
index 6f204849d0..11a87845e1 100644
--- a/packages/builder/src/stores/portal/theme.js
+++ b/packages/builder/src/stores/portal/theme.js
@@ -1,28 +1,29 @@
+import { createLocalStorageStore } from "@budibase/frontend-core"
+import { derived } from "svelte/store"
 import {
-  Constants,
-  createLocalStorageStore,
+  DefaultBuilderTheme,
   ensureValidTheme,
   getThemeClassNames,
-} from "@budibase/frontend-core"
-import { derived } from "svelte/store"
+  ThemeOptions,
+  ThemeClassPrefix,
+} from "@budibase/shared-core"
 
 export const getThemeStore = () => {
-  const defaultBuilderTheme = Constants.Themes.Darkest
   const themeElement = document.documentElement
   const initialValue = {
-    theme: defaultBuilderTheme,
+    theme: DefaultBuilderTheme,
   }
   const store = createLocalStorageStore("bb-theme", initialValue)
   const derivedStore = derived(store, $store => ({
     ...$store,
-    theme: ensureValidTheme($store.theme, defaultBuilderTheme),
+    theme: ensureValidTheme($store.theme, DefaultBuilderTheme),
   }))
 
   // Update theme class when store changes
   derivedStore.subscribe(({ theme }) => {
     const classNames = getThemeClassNames(theme).split(" ")
-    Constants.ThemeOptions.forEach(option => {
-      const className = `${Constants.ThemeClassPrefix}${option.id}`
+    ThemeOptions.forEach(option => {
+      const className = `${ThemeClassPrefix}${option.id}`
       themeElement.classList.toggle(className, classNames.includes(className))
     })
   })
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 654e951061..1610f36bdc 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -3,11 +3,8 @@
   import { setContext, onMount } from "svelte"
   import { Layout, Heading, Body } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg"
-  import {
-    Constants,
-    CookieUtils,
-    getThemeClassNames,
-  } from "@budibase/frontend-core"
+  import { Constants, CookieUtils } from "@budibase/frontend-core"
+  import { getThemeClassNames } from "@budibase/shared-core"
   import Component from "./Component.svelte"
   import SDK from "sdk"
   import {
diff --git a/packages/client/src/stores/theme.js b/packages/client/src/stores/theme.js
index dde387ba9a..523d34cdc5 100644
--- a/packages/client/src/stores/theme.js
+++ b/packages/client/src/stores/theme.js
@@ -1,12 +1,11 @@
 import { derived } from "svelte/store"
 import { appStore } from "./app"
 import { builderStore } from "./builder"
-import { Constants, ensureValidTheme } from "@budibase/frontend-core"
+import { ensureValidTheme, DefaultAppTheme } from "@budibase/shared-core"
 
 // This is the good old acorn bug where having the word "g l o b a l" makes it
 // think that this is not ES6 compatible and starts throwing errors when using
 // optional chaining. Piss off acorn.
-const defaultTheme = Constants.Themes.Light
 const defaultCustomTheme = {
   primaryColor: "var(--spectrum-glo" + "bal-color-blue-600)",
   primaryColorHover: "var(--spectrum-glo" + "bal-color-blue-500)",
@@ -27,7 +26,7 @@ const createThemeStore = () => {
       }
 
       // Ensure theme is set
-      theme = ensureValidTheme(theme, defaultTheme)
+      theme = ensureValidTheme(theme, DefaultAppTheme)
 
       // Delete and nullish keys from the custom theme
       if (customTheme) {
diff --git a/packages/frontend-core/src/utils/index.js b/packages/frontend-core/src/utils/index.js
index 00f98fcc77..cc44eec74c 100644
--- a/packages/frontend-core/src/utils/index.js
+++ b/packages/frontend-core/src/utils/index.js
@@ -9,7 +9,6 @@ export * as SchemaUtils from "./schema"
 export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
 export * from "./download"
-export * from "./theme"
 export * from "./settings"
 export * from "./relatedColumns"
 export * from "./table"
diff --git a/packages/shared-core/src/constants/index.ts b/packages/shared-core/src/constants/index.ts
index 11bb79c8d3..47b4e8ab77 100644
--- a/packages/shared-core/src/constants/index.ts
+++ b/packages/shared-core/src/constants/index.ts
@@ -3,6 +3,7 @@ export * from "./api"
 export * from "./fields"
 export * from "./rows"
 export * from "./colors"
+export * from "./themes"
 
 export const OperatorOptions = {
   Equals: {
diff --git a/packages/shared-core/src/constants/themes.ts b/packages/shared-core/src/constants/themes.ts
index 208700f1af..be34611009 100644
--- a/packages/shared-core/src/constants/themes.ts
+++ b/packages/shared-core/src/constants/themes.ts
@@ -1,5 +1,10 @@
 import { ThemeMeta, Theme } from "@budibase/types"
 
+export const ThemeClassPrefix = "spectrum--"
+export const DefaultBuilderTheme = Theme.DARKEST
+export const DefaultAppTheme = Theme.LIGHT
+
+// Currently available theme options for builder and apps
 export const ThemeOptions: ThemeMeta[] = [
   {
     id: Theme.LIGHT,
@@ -21,5 +26,3 @@ export const ThemeOptions: ThemeMeta[] = [
     base: Theme.DARKEST,
   },
 ]
-
-export const ThemeClassPrefix = "spectrum--"

From 27d42a9bfe7bfb496f43772fb214db553d653cc5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 24 Oct 2024 09:43:30 +0100
Subject: [PATCH 4/8] Fix theme of in builder preview

---
 .../design/[screenId]/_components/AppPreview.svelte            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 055ecd88e0..ccea636328 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -19,6 +19,7 @@
   import { findComponent, findComponentPath } from "helpers/components"
   import { isActive, goto } from "@roxi/routify"
   import { ClientAppSkeleton } from "@budibase/frontend-core"
+  import { getThemeClassNames } from "@budibase/shared-core"
 
   let iframe
   let layout
@@ -257,7 +258,7 @@
   class:mobile={$previewStore.previewDevice === "mobile"}
 >
   {#if loading}
-    <div class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}>
+    <div class={`loading ${getThemeClassNames($themeStore.theme)}`}>
       <ClientAppSkeleton
         sideNav={$navigationStore?.navigation === "Left"}
         hideFooter

From 90fb36315f70bf162252182f16b2796e26b5b4c3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 24 Oct 2024 10:06:04 +0100
Subject: [PATCH 5/8] Add client feature to ensure full backwards compatibility
 with themes

---
 .../design/[screenId]/_components/AppPreview.svelte         | 6 ++++--
 packages/client/manifest.json                               | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index ccea636328..1e8868f03c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -19,7 +19,7 @@
   import { findComponent, findComponentPath } from "helpers/components"
   import { isActive, goto } from "@roxi/routify"
   import { ClientAppSkeleton } from "@budibase/frontend-core"
-  import { getThemeClassNames } from "@budibase/shared-core"
+  import { getThemeClassNames, ThemeClassPrefix } from "@budibase/shared-core"
 
   let iframe
   let layout
@@ -48,7 +48,9 @@
     layout,
     screen,
     selectedComponentId,
-    theme: $themeStore.theme,
+    theme: $appStore.clientFeatures.unifiedThemes
+      ? $themeStore.theme
+      : `${ThemeClassPrefix}${$themeStore.theme}`,
     customTheme: $themeStore.customTheme,
     previewDevice: $previewStore.previewDevice,
     messagePassing: $appStore.clientFeatures.messagePassing,
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 17aebc5225..393c08a282 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1,6 +1,7 @@
 {
   "features": {
     "spectrumThemes": true,
+    "unifiedTheme": true,
     "intelligentLoading": true,
     "deviceAwareness": true,
     "state": true,

From a38ae930970cfea7adf932f0a93597a22ebec34b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 24 Oct 2024 10:10:14 +0100
Subject: [PATCH 6/8] Lint

---
 .../builder/src/components/commandPalette/CommandPalette.svelte  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index 1e9acbb7e2..51a688fc72 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -22,7 +22,6 @@
   } from "stores/builder"
   import { themeStore } from "stores/portal"
   import { getContext } from "svelte"
-  import { Constants } from "@budibase/frontend-core"
   import { ThemeOptions } from "@budibase/shared-core"
 
   const modalContext = getContext(Context.Modal)

From 249f44dc110a059b5d20404e39df01811d1421fb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 24 Oct 2024 10:13:42 +0100
Subject: [PATCH 7/8] Use new default app theme constant when creating apps

---
 packages/server/src/api/controllers/application.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 0d811208cd..e7d0ed7ba7 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -63,7 +63,7 @@ import {
 import { BASE_LAYOUT_PROP_IDS } from "../../constants/layouts"
 import sdk from "../../sdk"
 import { builderSocket } from "../../websockets"
-import { sdk as sharedCoreSDK } from "@budibase/shared-core"
+import { DefaultAppTheme, sdk as sharedCoreSDK } from "@budibase/shared-core"
 import * as appMigrations from "../../appMigrations"
 
 // utility function, need to do away with this
@@ -302,7 +302,7 @@ async function performAppCreate(ctx: UserCtx<CreateAppRequest, App>) {
         navBackground: "var(--spectrum-global-color-gray-100)",
         links: [],
       },
-      theme: "light",
+      theme: DefaultAppTheme,
       customTheme: {
         buttonBorderRadius: "16px",
       },

From 889b216a93e63374b431c9cfcf78e11aab3180cb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 24 Oct 2024 10:22:43 +0100
Subject: [PATCH 8/8] Add theme tests

---
 packages/shared-core/src/tests/themes.ts | 28 ++++++++++++++++++++++++
 packages/shared-core/src/themes.ts       |  2 +-
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 packages/shared-core/src/tests/themes.ts

diff --git a/packages/shared-core/src/tests/themes.ts b/packages/shared-core/src/tests/themes.ts
new file mode 100644
index 0000000000..89c6910ad5
--- /dev/null
+++ b/packages/shared-core/src/tests/themes.ts
@@ -0,0 +1,28 @@
+import { getThemeClassNames, ensureValidTheme } from "../themes"
+import { Theme } from "@budibase/types"
+
+describe("theme class names", () => {
+  it("generates class names for a theme without base theme", () => {
+    expect(getThemeClassNames(Theme.LIGHT)).toStrictEqual("spectrum--light")
+  })
+  it("generates class names for a theme with base theme", () => {
+    expect(getThemeClassNames(Theme.NORD)).toStrictEqual(
+      "spectrum--darkest spectrum--nord"
+    )
+  })
+})
+
+describe("theme validity checking", () => {
+  it("handles no theme", () => {
+    expect(ensureValidTheme(undefined)).toStrictEqual(Theme.DARKEST)
+  })
+  it("allows specifiying a fallback", () => {
+    expect(ensureValidTheme(undefined, Theme.NORD)).toStrictEqual(Theme.NORD)
+  })
+  it("migrates lightest to light", () => {
+    expect(ensureValidTheme(Theme.LIGHTEST)).toStrictEqual(Theme.LIGHT)
+  })
+  it("migrates dark to darkest", () => {
+    expect(ensureValidTheme(Theme.DARK)).toStrictEqual(Theme.DARKEST)
+  })
+})
diff --git a/packages/shared-core/src/themes.ts b/packages/shared-core/src/themes.ts
index 1d1875d4e9..d70f188426 100644
--- a/packages/shared-core/src/themes.ts
+++ b/packages/shared-core/src/themes.ts
@@ -17,7 +17,7 @@ export const getThemeClassNames = (theme: Theme): string => {
 
 // Ensures a theme value is a valid option
 export const ensureValidTheme = (
-  theme: Theme,
+  theme?: Theme,
   fallback: Theme = Theme.DARKEST
 ): Theme => {
   if (!theme) {