Adding theme settings to main builder settings, this felt like a natural place to find it rather than needing to create an app.

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

@@ -1,82 +1,46 @@
 <script>
   import { themeStore } from "builderStore"
-  import { Label, DropdownMenu, Toggle, Button, Slider } from "@budibase/bbui"
+  import { Label, Toggle, Button, Slider } from "@budibase/bbui"
 
-  let anchor
-  let popover
   let showAdvanced = false
 </script>
 
-<div class="topnavitemright" on:click={popover.show} bind:this={anchor}>
+<div class="content">
-  <i class="ri-paint-fill" />
+  <div>
-</div>
+    <Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} />
-<div class="dropdown">
+  </div>
-  <DropdownMenu bind:this={popover} {anchor} align="right">
+  {#if $themeStore.darkMode && !showAdvanced}
-    <div class="content">
+    <div class="button">
-      <div>
+      <Button text on:click={() => (showAdvanced = true)}>Customise</Button>
-        <Label extraSmall grey>Theme</Label>
+    </div>
-        <Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} />
+  {/if}
-      </div>
+  {#if $themeStore.darkMode && showAdvanced}
-      {#if $themeStore.darkMode && !showAdvanced}
+    <Slider
-        <div class="button">
+        label="Hue"
-          <Button text on:click={() => (showAdvanced = true)}>Customise</Button>
+        bind:value={$themeStore.hue}
-        </div>
+        min="0"
-      {/if}
+        max="360"
-      {#if $themeStore.darkMode && showAdvanced}
+        showValue />
-        <Slider
+    <Slider
-          label="Hue"
+        label="Saturation"
-          bind:value={$themeStore.hue}
+        bind:value={$themeStore.saturation}
-          min="0"
+        min="0"
-          max="360"
+        max="100"
-          showValue />
+        showValue />
-        <Slider
+    <Slider
-          label="Saturation"
+        label="Lightness"
-          bind:value={$themeStore.saturation}
+        bind:value={$themeStore.lightness}
-          min="0"
+        min="0"
-          max="100"
+        max="32"
-          showValue />
+        showValue />
-        <Slider
+    <div class="button">
-          label="Lightness"
+      <Button text on:click={themeStore.reset}>Reset</Button>
-          bind:value={$themeStore.lightness}
-          min="0"
-          max="32"
-          showValue />
-        <div class="button">
-          <Button text on:click={themeStore.reset}>Reset</Button>
-        </div>
-      {/if}
     </div>
-  </DropdownMenu>
+  {/if}
 </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;
@@ -84,12 +48,7 @@
     gap: var(--spacing-l);
   }
 
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
   .button {
     align-self: flex-start;
   }
-</style>
+</style>

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

@@ -0,0 +1,56 @@
+<script>
+
+  import { Label, DropdownMenu } from "@budibase/bbui"
+  import ThemeEditor from "./ThemeEditor.svelte"
+
+  let anchor
+  let popover
+</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">
+      <Label extraSmall grey>Theme</Label>
+      <ThemeEditor />
+    </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);
+  }
+
+  h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  .content {
+    padding: var(--spacing-xl);
+  }
+</style>

packages/builder/src/components/start/BuilderSettingsModal.svelte

@@ -2,6 +2,7 @@
   import { notifier } from "builderStore/store/notifications"
   import { hostingStore } from "builderStore"
   import { Input, ModalContent, Toggle } from "@budibase/bbui"
+  import ThemeEditor from "components/settings/ThemeEditor.svelte"
   import analytics from "analytics"
   import { onMount } from "svelte"
 
@@ -32,6 +33,8 @@
   confirmText="Save"
   onConfirm={save}
   showConfirmButton={selfhosted}>
+  <h5>Theme</h5>
+  <ThemeEditor />
   <h5>Hosting</h5>
   <p>
     This section contains settings that relate to the deployment and hosting of

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

@@ -2,7 +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 ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
   import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte"
   import { get } from "builderStore/api"
   import { isActive, goto, layout } from "@sveltech/routify"
@@ -67,7 +67,7 @@
       {/each}
     </div>
     <div class="toprightnav">
-      <ThemeEditor />
+      <ThemeEditorDropdown />
       <FeedbackNavLink />
       <div class="topnavitemright">
         <a