2022-01-20 12:19:37 +01:00
|
|
|
import { createLocalStorageStore } from "@budibase/frontend-core"
|
2020-10-30 14:23:49 +01:00
|
|
|
|
|
|
|
export const getThemeStore = () => {
|
|
|
|
const themeElement = document.documentElement
|
|
|
|
const initialValue = {
|
2021-04-27 14:15:49 +02:00
|
|
|
theme: "darkest",
|
|
|
|
options: ["lightest", "light", "dark", "darkest"],
|
2020-10-30 14:23:49 +01:00
|
|
|
}
|
2022-01-20 12:19:37 +01:00
|
|
|
const store = createLocalStorageStore("bb-theme", initialValue)
|
2020-10-30 14:23:49 +01:00
|
|
|
|
2021-04-27 14:15:49 +02:00
|
|
|
// Update theme class when store changes
|
2021-05-04 12:32:22 +02:00
|
|
|
store.subscribe(state => {
|
2021-04-27 14:15:49 +02:00
|
|
|
// Handle any old local storage values - this can be removed after the update
|
|
|
|
if (state.darkMode !== undefined) {
|
|
|
|
store.set(initialValue)
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2021-05-04 12:32:22 +02:00
|
|
|
state.options.forEach(option => {
|
2021-04-27 14:15:49 +02:00
|
|
|
themeElement.classList.toggle(
|
|
|
|
`spectrum--${option}`,
|
|
|
|
option === state.theme
|
|
|
|
)
|
|
|
|
})
|
2020-10-30 14:23:49 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
return store
|
|
|
|
}
|