refactor theme store
This commit is contained in:
@@ -1,29 +1,27 @@
|
|||||||
import { Store } from 'tauri-plugin-store-api';
|
|
||||||
import { writable } from 'svelte/store';
|
import { writable } from 'svelte/store';
|
||||||
import type { Theme } from '$types';
|
import type { Theme } from '$types';
|
||||||
|
|
||||||
const store = new Store('.settings.dat');
|
|
||||||
|
|
||||||
const createThemeStore = () => {
|
const createThemeStore = () => {
|
||||||
const { subscribe, update, set } = writable<Theme>();
|
let theme = localStorage.getItem('theme') as Theme | null;
|
||||||
|
if (!theme) {
|
||||||
|
theme = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||||
|
? 'dark'
|
||||||
|
: 'light';
|
||||||
|
localStorage.setItem('theme', theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { subscribe, update } = writable<Theme>(theme);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
subscribe,
|
subscribe,
|
||||||
toggleTheme: () => {
|
toggleTheme: () => {
|
||||||
update(currentTheme => {
|
update(currentTheme => {
|
||||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||||
store.set('theme', newTheme);
|
localStorage.setItem('theme', newTheme);
|
||||||
return newTheme;
|
return newTheme;
|
||||||
});
|
});
|
||||||
},
|
|
||||||
load: async () => {
|
|
||||||
let storedTheme = (await store.get('theme')) as Theme | null;
|
|
||||||
if (!storedTheme) {
|
|
||||||
storedTheme = 'dark';
|
|
||||||
store.set('theme', storedTheme);
|
|
||||||
}
|
|
||||||
set(storedTheme);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export const theme = createThemeStore();
|
export const theme = createThemeStore();
|
||||||
|
Reference in New Issue
Block a user