Add support for custom themes in client apps

packages/client/src/components/ClientApp.svelte

@@ -92,7 +92,7 @@
     id="spectrum-root"
     lang="en"
     dir="ltr"
-    class="spectrum spectrum--medium spectrum--darkest {$themeStore.theme}"
+    class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
   >
     <DeviceBindingsProvider>
       <UserBindingsProvider>

packages/client/src/components/app/index.js

@@ -5,6 +5,8 @@ import "@spectrum-css/vars/dist/spectrum-darkest.css"
 import "@spectrum-css/vars/dist/spectrum-dark.css"
 import "@spectrum-css/vars/dist/spectrum-light.css"
 import "@spectrum-css/vars/dist/spectrum-lightest.css"
+import "@budibase/frontend-core/src/themes/nord.css"
+import "@budibase/frontend-core/src/themes/midnight.css"
 import "@spectrum-css/page/dist/index-vars.css"
 
 // Non user-facing components

packages/client/src/stores/theme.js

@@ -1,6 +1,7 @@
 import { derived } from "svelte/store"
 import { appStore } from "./app"
 import { builderStore } from "./builder"
+import { Constants } 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
@@ -28,6 +29,13 @@ const createThemeStore = () => {
       // Ensure theme is set
       theme = theme || defaultTheme
 
+      // Get base theme
+      let base =
+        Constants.Themes.find(x => `spectrum--${x.class}` === theme)?.base || ""
+      if (base) {
+        base = `spectrum--${base}`
+      }
+
       // Delete and nullish keys from the custom theme
       if (customTheme) {
         Object.entries(customTheme).forEach(([key, value]) => {
@@ -51,6 +59,7 @@ const createThemeStore = () => {
 
       return {
         theme,
+        baseTheme: base,
         customTheme,
         customThemeCss,
       }