diff --git a/packages/builder/src/components/settings/ThemeEditor.svelte b/packages/builder/src/components/settings/ThemeEditor.svelte new file mode 100644 index 0000000000..8355325e70 --- /dev/null +++ b/packages/builder/src/components/settings/ThemeEditor.svelte @@ -0,0 +1,107 @@ + + +
+ +
+ + + diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 68409e2e5c..6bb6d288b3 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -1,23 +1,24 @@ -:root { +html { /* Light theme */ --background: #FFFFFF; --ink: #393C44; - +} +html.dark { /* Dark theme */ - --hue: 208; - --saturation: 9%; - --base-brightness: 16%; - --ink: hsl(var(--hue), var(--saturation), 90%); - --background: hsl(var(--hue), var(--saturation), var(--base-brightness)); - --grey-1: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 2%)); - --grey-2: hsl(var(--hue), calc(var(--saturation) + 1%), calc(var(--base-brightness) + 4%)); - --grey-3: hsl(var(--hue), var(--saturation),calc(var(--base-brightness) + 7%)); - --grey-4: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 10%)); - --grey-5: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 25%)); - --grey-6: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 30%)); - --grey-7: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 55%)); - --grey-8: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 60%)); - --grey-9: hsl(var(--hue), var(--saturation), calc(var(--base-brightness) + 70%)); + --theme-hue: 208; + --theme-saturation: 9%; + --theme-brightness: 16%; + --ink: hsl(var(--theme-hue), var(--theme-saturation), 90%); + --background: hsl(var(--theme-hue), var(--theme-saturation), var(--theme-brightness)); + --grey-1: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 2%)); + --grey-2: hsl(var(--theme-hue), calc(var(--theme-saturation) + 1%), calc(var(--theme-brightness) + 4%)); + --grey-3: hsl(var(--theme-hue), var(--theme-saturation),calc(var(--theme-brightness) + 7%)); + --grey-4: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 10%)); + --grey-5: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 25%)); + --grey-6: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 30%)); + --grey-7: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 55%)); + --grey-8: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 60%)); + --grey-9: hsl(var(--theme-hue), var(--theme-saturation), calc(var(--theme-brightness) + 70%)); } html, body { diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte index 59a933d4d0..d1d682d0b9 100644 --- a/packages/builder/src/pages/[application]/_reset.svelte +++ b/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}
+