2022-07-26 14:41:30 +02:00
|
|
|
import { Constants, createLocalStorageStore } from "@budibase/frontend-core"
|
2020-10-30 14:23:49 +01:00
|
|
|
|
|
|
|
export const getThemeStore = () => {
|
|
|
|
const themeElement = document.documentElement
|
2022-03-15 12:16:51 +01:00
|
|
|
|
2020-10-30 14:23:49 +01:00
|
|
|
const initialValue = {
|
2021-04-27 14:15:49 +02:00
|
|
|
theme: "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
|
|
|
|
}
|
|
|
|
|
2022-07-27 17:37:35 +02:00
|
|
|
// Update global class names to use the new theme and remove others
|
|
|
|
Constants.Themes.forEach(option => {
|
2021-04-27 14:15:49 +02:00
|
|
|
themeElement.classList.toggle(
|
2022-07-27 17:37:35 +02:00
|
|
|
`spectrum--${option.class}`,
|
|
|
|
option.class === state.theme
|
2021-04-27 14:15:49 +02:00
|
|
|
)
|
|
|
|
})
|
2022-07-27 17:37:35 +02:00
|
|
|
|
|
|
|
// Add base theme if required
|
|
|
|
const selectedTheme = Constants.Themes.find(x => x.class === state.theme)
|
|
|
|
if (selectedTheme?.base) {
|
|
|
|
themeElement.classList.add(`spectrum--${selectedTheme.base}`)
|
|
|
|
}
|
2020-10-30 14:23:49 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
return store
|
|
|
|
}
|