mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-25 01:06:15 -04:00
feat(enhancement): use system dark mode (#458)
* Use prefers-color-scheme * Remove theme store
This commit is contained in:
parent
1e2a35b892
commit
cf7b1f000a
4 changed files with 8 additions and 35 deletions
|
@ -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']);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
},
|
||||
},
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue