Add global app theme picker and use it in client preview

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

@@ -8,7 +8,6 @@ import {
   selectedComponent,
   selectedAccessRole,
 } from "builderStore"
-// Backendstores
 import {
   datasources,
   integrations,
@@ -43,6 +42,7 @@ const INITIAL_FRONTEND_STATE = {
   appId: "",
   routes: {},
   clientLibPath: "",
+  theme: "",
 }
 
 export const getFrontendStore = () => {
@@ -62,6 +62,7 @@ export const getFrontendStore = () => {
         url: application.url,
         layouts,
         screens,
+        theme: application.theme,
         hasAppPackage: true,
         appInstance: application.instance,
         clientLibPath,
@@ -79,6 +80,20 @@ export const getFrontendStore = () => {
       database.set(application.instance)
       tables.init()
     },
+    theme: {
+      save: async theme => {
+        const appId = get(store).appId
+        const response = await api.put(`/api/applications/${appId}`, { theme })
+        if (response.status === 200) {
+          store.update(state => {
+            state.theme = theme
+            return state
+          })
+        } else {
+          throw new Error("Error updating theme")
+        }
+      },
+    },
     routing: {
       fetch: async () => {
         const response = await api.get("/api/routing")

packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { store } from "builderStore"
+
+  const themeOptions = [
+    {
+      label: "Lightest",
+      value: "spectrum--lightest",
+    },
+    {
+      label: "Light",
+      value: "spectrum--light",
+    },
+    {
+      label: "Dark",
+      value: "spectrum--dark",
+    },
+    {
+      label: "Darkest",
+      value: "spectrum--darkest",
+    },
+  ]
+</script>
+
+<div>
+  <Select
+    value={$store.theme || "spectrum--lightest"}
+    options={themeOptions}
+    placeholder={null}
+    on:change={e => store.actions.theme.save(e.detail)}
+  />
+</div>
+
+<style>
+  div {
+    padding-right: 8px;
+  }
+</style>

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -44,6 +44,7 @@
     screen,
     selectedComponentId,
     previewType: $store.currentFrontEndType,
+    theme: $store.theme,
   }
 
   // Saving pages and screens to the DB causes them to have _revs.

packages/builder/src/components/design/AppPreview/iframeTemplate.js

@@ -46,7 +46,14 @@ export default `
         }
 
         // Extract data from message
-        const { selectedComponentId, layout, screen, previewType, appId } = JSON.parse(event.data)
+        const {
+          selectedComponentId,
+          layout,
+          screen,
+          previewType,
+          appId,
+          theme
+        } = JSON.parse(event.data)
 
         // Set some flags so the app knows we're in the builder
         window["##BUDIBASE_IN_BUILDER##"] = true
@@ -56,6 +63,7 @@ export default `
         window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
         window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
         window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
+        window["##BUDIBASE_PREVIEW_THEME##"] = theme
 
         // Initialise app
         if (window.loadBudibase) {

packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte

@@ -13,6 +13,7 @@
   import { FrontendTypes } from "constants"
   import { findComponent, findComponentPath } from "builderStore/storeUtils"
   import { get } from "svelte/store"
+  import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte"
 
   // Cache previous values so we don't update the URL more than necessary
   let previousType
@@ -147,7 +148,10 @@
 
   <div class="preview-pane">
     {#if $currentAsset}
-      <ComponentSelectionList />
+      <div class="preview-header">
+        <ComponentSelectionList />
+        <AppThemeSelect />
+      </div>
       <div class="preview-content">
         <CurrentItemPreview />
       </div>
@@ -193,6 +197,10 @@
     gap: var(--spacing-m);
     padding: var(--spacing-xl) 40px;
   }
+  .preview-header {
+    display: grid;
+    grid-template-columns: 1fr 100px;
+  }
   .preview-content {
     flex: 1 1 auto;
   }

packages/client/src/components/ClientApp.svelte

@@ -55,6 +55,8 @@
       }
     }
   }
+
+  $: themeClass = $builderStore.theme || "spectrum--lightest"
 </script>
 
 {#if dataLoaded && $screenStore.activeLayout}
@@ -62,7 +64,7 @@
     id="spectrum-root"
     lang="en"
     dir="ltr"
-    class="spectrum spectrum--medium spectrum--light"
+    class="spectrum spectrum--medium {themeClass}"
   >
     <Provider key="user" data={$authStore} {actions}>
       <div id="app-root">

packages/client/src/index.js

@@ -13,6 +13,7 @@ const loadBudibase = () => {
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
     previewId: window["##BUDIBASE_PREVIEW_ID##"],
     previewType: window["##BUDIBASE_PREVIEW_TYPE##"],
+    theme: window["##BUDIBASE_PREVIEW_THEME##"],
   })
 
   // Create app if one hasn't been created yet

packages/standard-components/manifest.json

@@ -1651,46 +1651,6 @@
         "label": "Schema",
         "key": "dataSource"
       },
-      {
-        "type": "select",
-        "label": "Theme",
-        "key": "theme",
-        "defaultValue": "spectrum--light",
-        "options": [
-          {
-            "label": "Lightest",
-            "value": "spectrum--lightest"
-          },
-          {
-            "label": "Light",
-            "value": "spectrum--light"
-          },
-          {
-            "label": "Dark",
-            "value": "spectrum--dark"
-          },
-          {
-            "label": "Darkest",
-            "value": "spectrum--darkest"
-          }
-        ]
-      },
-      {
-        "type": "select",
-        "label": "Size",
-        "key": "size",
-        "defaultValue": "spectrum--medium",
-        "options": [
-          {
-            "label": "Medium",
-            "value": "spectrum--medium"
-          },
-          {
-            "label": "Large",
-            "value": "spectrum--large"
-          }
-        ]
-      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -2067,46 +2027,6 @@
         "key": "rowCount",
         "defaultValue": 8
       },
-      {
-        "type": "select",
-        "label": "Theme",
-        "key": "theme",
-        "defaultValue": "spectrum--light",
-        "options": [
-          {
-            "label": "Lightest",
-            "value": "spectrum--lightest"
-          },
-          {
-            "label": "Light",
-            "value": "spectrum--light"
-          },
-          {
-            "label": "Dark",
-            "value": "spectrum--dark"
-          },
-          {
-            "label": "Darkest",
-            "value": "spectrum--darkest"
-          }
-        ]
-      },
-      {
-        "type": "select",
-        "label": "Size",
-        "key": "size",
-        "defaultValue": "spectrum--medium",
-        "options": [
-          {
-            "label": "Medium",
-            "value": "spectrum--medium"
-          },
-          {
-            "label": "Large",
-            "value": "spectrum--large"
-          }
-        ]
-      },
       {
         "type": "multifield",
         "label": "Columns",

packages/standard-components/src/forms/InnerForm.svelte

@@ -5,8 +5,6 @@
   import { generateID } from "../helpers"
 
   export let dataSource
-  export let theme
-  export let size
   export let disabled = false
   export let initialValues
 
@@ -160,14 +158,7 @@
   {actions}
   data={{ ...$formState.values, tableId: dataSource?.tableId }}
 >
-  <div
+  <div use:styleable={$component.styles}>
-    lang="en"
-    dir="ltr"
-    use:styleable={$component.styles}
-    class={`spectrum ${size || "spectrum--medium"} ${
-      theme || "spectrum--light"
-    }`}
-  >
     {#if loaded}
       <slot />
     {/if}

packages/standard-components/src/table/Table.svelte

@@ -3,8 +3,6 @@
   import { Table } from "@budibase/bbui"
   import SlotRenderer from "./SlotRenderer.svelte"
 
-  export let theme
-  export let size
   export let dataProvider
   export let columns
   export let showAutoColumns
@@ -73,12 +71,7 @@
   }
 </script>
 
-<div
+<div use:styleable={$component.styles}>
-  lang="en"
-  dir="ltr"
-  use:styleable={$component.styles}
-  class={`spectrum ${size || "spectrum--medium"} ${theme || "spectrum--light"}`}
->
   <Table
     {data}
     {schema}