feat(enhancement): use system dark mode (#458)

* Use prefers-color-scheme

* Remove theme store
This commit is contained in:
Seb 2023-06-18 09:59:22 +01:00 committed by GitHub
parent 1e2a35b892
commit cf7b1f000a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 35 deletions

View file

@ -1,4 +1,4 @@
import { useThemeStore } from './theme.store';
import { useStyleStore } from '@/stores/style.store';
export { defineThemes };
@ -6,8 +6,8 @@ function defineThemes<Theme>(themes: { light: Theme; dark: Theme }) {
return {
themes,
useTheme() {
const themeStore = useThemeStore();
return computed(() => themes[themeStore.themeType]);
const styleStore = useStyleStore();
return computed(() => themes[styleStore.isDarkTheme ? 'dark' : 'light']);
},
};
}

View file

@ -1,20 +0,0 @@
import { defineStore } from 'pinia';
export const useThemeStore = defineStore('ui-theme', {
state: () => ({
themeType: useStorage<'dark' | 'light'>('ui-store:theme-type', 'dark') as Ref<'dark' | 'light'>,
}),
getters: {
isDarkTheme(): boolean {
return this.themeType === 'dark';
},
isLightTheme(): boolean {
return this.themeType === 'light';
},
},
actions: {
toggleTheme() {
this.themeType = this.isDarkTheme ? 'light' : 'dark';
},
},
});