41 lines
1016 B
TypeScript
41 lines
1016 B
TypeScript
![]() |
import { theme, type TokenType as AntdTheme } from 'ant-design-vue';
|
||
|
import { ref, watch } from 'vue';
|
||
|
|
||
|
enum Theme {
|
||
|
Light = 'light',
|
||
|
Dark = 'dark',
|
||
|
}
|
||
|
export const THEMES = Object.freeze<[string, Theme][]>(Object.entries(Theme));
|
||
|
|
||
|
const THEME_STORAGE_KEY = 'locale';
|
||
|
|
||
|
class ThemeService {
|
||
|
#theme = ref<Theme>(<Theme>localStorage.getItem(THEME_STORAGE_KEY) || Theme.Dark);
|
||
|
public get theme(): Theme {
|
||
|
return this.#theme.value;
|
||
|
}
|
||
|
public set theme(v: Theme) {
|
||
|
this.#theme.value = v;
|
||
|
localStorage.setItem(THEME_STORAGE_KEY, v);
|
||
|
}
|
||
|
|
||
|
public get ant(): AntdTheme {
|
||
|
switch (this.#theme.value) {
|
||
|
case Theme.Dark:
|
||
|
return { algorithm: theme.darkAlgorithm };
|
||
|
case Theme.Light:
|
||
|
default:
|
||
|
return { algorithm: theme.defaultAlgorithm };
|
||
|
}
|
||
|
}
|
||
|
|
||
|
constructor() {
|
||
|
watch(this.#theme, (v) => this.#load(v), { immediate: true });
|
||
|
}
|
||
|
|
||
|
#load(theme: Theme): void {
|
||
|
document.documentElement.setAttribute('theme', theme);
|
||
|
}
|
||
|
}
|
||
|
export default new ThemeService();
|