Remove lightest and dark themes, use enums for themes, standardise naming

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
         }),
     })),

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>

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}
+      class:selected={theme.id === $themeStore.theme}
-      on:click={() => onChangeTheme(theme.class)}
+      on:click={() => onChangeTheme(theme.id)}
     >
-      <div
+      <div class="color {getThemeClassNames(theme.id)}" />
-        style="background: {theme.preview}"
-        class="color spectrum--{theme.class}"
-      />
       {theme.name}
     </div>
   {/each}

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
+      <div class="loadingThemeWrapper {getThemeClassNames(app.theme)}">
-        class={`loadingThemeWrapper ${getBaseTheme(app.theme)} ${app.theme}`}
-      >
         <ClientAppSkeleton
           noAnimation
           hideDevTools={app?.status === "published"}

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()

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 => {
+  derivedStore.subscribe(({ theme }) => {
-    // Handle any old local storage values - this can be removed after the update
+    const classNames = getThemeClassNames(theme).split(" ")
-    if (state.darkMode !== undefined) {
+    Constants.ThemeOptions.forEach(option => {
-      store.set(initialValue)
+      const className = `${Constants.ThemeClassPrefix}${option.id}`
-      return
+      themeElement.classList.toggle(className, classNames.includes(className))
-    }
-
-    // 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
-      )
     })
-
-    // 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()

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}
   >

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,
       }

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",
+    id: Themes.Light,
-    name: "Lightest",
-  },
-  {
-    class: "light",
     name: "Light",
   },
   {
-    class: "dark",
+    id: Themes.Darkest,
     name: "Dark",
   },
   {
-    class: "darkest",
+    id: Themes.Nord,
-    name: "Darkest",
-  },
-  {
-    class: "nord",
     name: "Nord",
-    base: "darkest",
+    base: Themes.Darkest,
   },
   {
-    class: "midnight",
+    id: Themes.Midnight,
     name: "Midnight",
-    base: "darkest",
+    base: Themes.Darkest,
   },
 ]
 

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 => {
+// Gets the CSS class names for the specified theme
-  if (!theme) {
+export const getThemeClassNames = theme => {
-    return ""
+  theme = ensureValidTheme(theme)
-  }
+  let classNames = `${ThemeClassPrefix}${theme}`
-  let base = Themes.find(x => `spectrum--${x.class}` === theme)?.base || ""
+
+  // 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
 }