From 8758f6b49a4e356bb123d20310b182dd4391e630 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Jul 2022 11:52:10 +0100
Subject: [PATCH] Add support for custom themes in client apps

---
 packages/client/src/components/ClientApp.svelte | 2 +-
 packages/client/src/components/app/index.js     | 2 ++
 packages/client/src/stores/theme.js             | 9 +++++++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 64b1712b89..8312fb29d1 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/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>
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index c7b8f18643..1c0d868433 100644
--- a/packages/client/src/components/app/index.js
+++ b/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
diff --git a/packages/client/src/stores/theme.js b/packages/client/src/stores/theme.js
index 995dafbedc..8877556f0c 100644
--- a/packages/client/src/stores/theme.js
+++ b/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,
       }