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,20 +1,12 @@
 <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}>
-  <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={$themeStore.darkMode} />
   </div>
   {#if $themeStore.darkMode && !showAdvanced}
@@ -46,37 +38,9 @@
     </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;
@@ -84,11 +48,6 @@
     gap: var(--spacing-l);
   }
 
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
   .button {
     align-self: flex-start;
   }

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