Add theme editor component to top bar

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

@@ -0,0 +1,107 @@
+<script>
+  import { Label, DropdownMenu, Toggle, Button } from "@budibase/bbui"
+
+  let anchor
+  let popover
+  let dark = false
+  let hue = 208
+  let saturation = 9
+  let lightness = 16
+  let showAdvanced = false
+
+  function setCSSVariable(prop, value) {
+    document.documentElement.style.setProperty(prop, value)
+  }
+
+  function reset() {
+    hue = 208
+    saturation = 9
+    lightness = 16
+  }
+
+  $: document.documentElement.classList[dark ? "add" : "remove"]("dark")
+  $: setCSSVariable("--theme-hue", Math.round(hue))
+  $: setCSSVariable("--theme-saturation", `${Math.round(saturation)}%`)
+  $: setCSSVariable("--theme-brightness", `${Math.round(lightness)}%`)
+</script>
+
+<div class="topnavitemright" on:click={popover.show} bind:this={anchor}>
+  <i class="ri-paint-fill" />
+</div>
+<div class="dropdown">
+  <DropdownMenu bind:this={popover} {anchor} align="right">
+    <div class="content">
+      <div>
+        <Label extraSmall grey>Theme</Label>
+        <Toggle thin text="Dark theme" bind:checked={dark} />
+      </div>
+      {#if dark && !showAdvanced}
+        <div class="button">
+          <Button text on:click={() => (showAdvanced = true)}>Customise</Button>
+        </div>
+      {/if}
+      {#if dark && showAdvanced}
+        <div>
+          <Label extraSmall grey>Hue</Label>
+          <input type="range" bind:value={hue} min="0" max="360" />
+        </div>
+        <div>
+          <Label extraSmall grey>Saturation</Label>
+          <input type="range" bind:value={saturation} min="0" max="100" />
+        </div>
+        <div>
+          <Label extraSmall grey>Lightness</Label>
+          <input type="range" bind:value={lightness} min="0" max="32" />
+        </div>
+        <div class="button">
+          <Button text on:click={reset}>Reset</Button>
+        </div>
+      {/if}
+    </div>
+  </DropdownMenu>
+</div>
+
+<style>
+  .dropdown {
+    z-index: 2;
+  }
+
+  i {
+    font-size: 18px;
+    color: var(--grey-7);
+  }
+  .topnavitemright {
+    cursor: pointer;
+    color: var(--grey-7);
+    margin: 0 12px 0 0;
+    font-weight: 500;
+    font-size: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    width: 24px;
+  }
+  .topnavitemright:hover i {
+    color: var(--ink);
+  }
+
+  .content {
+    padding: var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
+
+  h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  .button {
+    align-self: flex-start;
+  }
+</style>

packages/builder/src/global.css

@@ -1,23 +1,24 @@
-:root {
+html {
     /* Light theme */
     --background: #FFFFFF;
     --ink: #393C44;
-
+}
+html.dark {
     /* Dark theme */
-    --hue: 208;
+    --theme-hue: 208;
-    --saturation: 9%;
+    --theme-saturation: 9%;
-    --base-brightness: 16%;
+    --theme-brightness: 16%;
-    --ink: hsl(var(--hue), var(--saturation), 90%);
+    --ink: hsl(var(--theme-hue), var(--theme-saturation), 90%);
-    --background: hsl(var(--hue), var(--saturation), var(--base-brightness));
+    --background: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-brightness));
-    --grey-1: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 2%));
+    --grey-1: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 2%));
-    --grey-2: hsl(var(--hue), calc(var(--saturation) + 1%), calc(var(--base-brightness) + 4%));
+    --grey-2: hsl(var(--theme-hue), calc(var(--theme-saturation) + 1%), calc(var(--theme-brightness) + 4%));
-    --grey-3: hsl(var(--hue), var(--saturation),calc(var(--base-brightness) + 7%));
+    --grey-3: hsl(var(--theme-hue), var(--theme-saturation),calc(var(--theme-brightness) + 7%));
-    --grey-4: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 10%));
+    --grey-4: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 10%));
-    --grey-5: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 25%));
+    --grey-5: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 25%));
-    --grey-6: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 30%));
+    --grey-6: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 30%));
-    --grey-7: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 55%));
+    --grey-7: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 55%));
-    --grey-8: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 60%));
+    --grey-8: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 60%));
-    --grey-9: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 70%));
+    --grey-9: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 70%));
 }
 
 html, body {

packages/builder/src/pages/[application]/_reset.svelte

@@ -2,6 +2,7 @@
   import { store, automationStore, backendUiStore } from "builderStore"
   import { Button } from "@budibase/bbui"
   import SettingsLink from "components/settings/Link.svelte"
+  import ThemeEditor from "components/settings/ThemeEditor.svelte"
   import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte"
   import { get } from "builderStore/api"
   import { isActive, goto, layout } from "@sveltech/routify"
@@ -65,6 +66,7 @@
       {/each}
     </div>
     <div class="toprightnav">
+      <ThemeEditor />
       <FeedbackNavLink />
       <div class="topnavitemright">
         <a target="_blank" href="https://docs.budibase.com">