Add support for all 4 spectrum themes in builder!
This commit is contained in:
parent
759f34626b
commit
c72a65bc5f
2 changed files with 23 additions and 9 deletions
|
@ -3,14 +3,25 @@ import { localStorageStore } from "./localStorage"
|
||||||
export const getThemeStore = () => {
|
export const getThemeStore = () => {
|
||||||
const themeElement = document.documentElement
|
const themeElement = document.documentElement
|
||||||
const initialValue = {
|
const initialValue = {
|
||||||
darkMode: true,
|
theme: "darkest",
|
||||||
|
options: ["lightest", "light", "dark", "darkest"],
|
||||||
}
|
}
|
||||||
const store = localStorageStore("bb-theme", initialValue)
|
const store = localStorageStore("bb-theme", initialValue)
|
||||||
|
|
||||||
// Update theme when store changes
|
// Update theme class when store changes
|
||||||
store.subscribe(theme => {
|
store.subscribe(state => {
|
||||||
themeElement.classList.toggle("spectrum--darkest", theme.darkMode)
|
// Handle any old local storage values - this can be removed after the update
|
||||||
themeElement.classList.toggle("spectrum--lightest", !theme.darkMode)
|
if (state.darkMode !== undefined) {
|
||||||
|
store.set(initialValue)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
state.options.forEach(option => {
|
||||||
|
themeElement.classList.toggle(
|
||||||
|
`spectrum--${option}`,
|
||||||
|
option === state.theme
|
||||||
|
)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
return store
|
return store
|
||||||
|
|
|
@ -1,8 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import { themeStore } from "builderStore"
|
import { themeStore } from "builderStore"
|
||||||
import { Toggle } from "@budibase/bbui"
|
import { Select } from "@budibase/bbui"
|
||||||
|
import { capitalise } from "../../helpers"
|
||||||
let showAdvanced = false
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
|
<Select
|
||||||
|
options={$themeStore.options}
|
||||||
|
bind:value={$themeStore.theme}
|
||||||
|
placeholder={null}
|
||||||
|
getOptionLabel={capitalise} />
|
||||||
|
|
Loading…
Reference in a new issue