Add support for all 4 spectrum themes in builder!

packages/builder/src/builderStore/store/theme.js

@@ -3,14 +3,25 @@ import { localStorageStore } from "./localStorage"
 export const getThemeStore = () => {
   const themeElement = document.documentElement
   const initialValue = {
-    darkMode: true,
+    theme: "darkest",
+    options: ["lightest", "light", "dark", "darkest"],
   }
   const store = localStorageStore("bb-theme", initialValue)
 
-  // Update theme when store changes
+  // Update theme class when store changes
-  store.subscribe(theme => {
+  store.subscribe(state => {
-    themeElement.classList.toggle("spectrum--darkest", theme.darkMode)
+    // Handle any old local storage values - this can be removed after the update
-    themeElement.classList.toggle("spectrum--lightest", !theme.darkMode)
+    if (state.darkMode !== undefined) {
+      store.set(initialValue)
+      return
+    }
+
+    state.options.forEach(option => {
+      themeElement.classList.toggle(
+        `spectrum--${option}`,
+        option === state.theme
+      )
+    })
   })
 
   return store

packages/builder/src/components/settings/ThemeEditor.svelte

@@ -1,8 +1,11 @@
 <script>
   import { themeStore } from "builderStore"
-  import { Toggle } from "@budibase/bbui"
+  import { Select } from "@budibase/bbui"
-
+  import { capitalise } from "../../helpers"
-  let showAdvanced = false
 </script>
 
-<Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
+<Select
+  options={$themeStore.options}
+  bind:value={$themeStore.theme}
+  placeholder={null}
+  getOptionLabel={capitalise} />