51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { defineStore } from "pinia";
|
|
|
|
export type ThemePreference = "system" | "light" | "dark";
|
|
export type ThemeValue = "light" | "dark";
|
|
|
|
const STORAGE_KEY = "scholarr-theme-preference";
|
|
|
|
function systemTheme(): ThemeValue {
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
}
|
|
|
|
function applyTheme(theme: ThemeValue, preference: ThemePreference): void {
|
|
const root = document.documentElement;
|
|
root.classList.toggle("dark", theme === "dark");
|
|
root.setAttribute("data-theme-preference", preference);
|
|
}
|
|
|
|
export const useThemeStore = defineStore("theme", {
|
|
state: () => ({
|
|
preference: "system" as ThemePreference,
|
|
active: "light" as ThemeValue,
|
|
}),
|
|
actions: {
|
|
initialize(): void {
|
|
let stored: string | null = null;
|
|
try {
|
|
stored = localStorage.getItem(STORAGE_KEY);
|
|
} catch (_err) {
|
|
stored = null;
|
|
}
|
|
|
|
if (stored === "light" || stored === "dark" || stored === "system") {
|
|
this.preference = stored;
|
|
}
|
|
|
|
this.active = this.preference === "system" ? systemTheme() : this.preference;
|
|
applyTheme(this.active, this.preference);
|
|
},
|
|
setPreference(preference: ThemePreference): void {
|
|
this.preference = preference;
|
|
this.active = preference === "system" ? systemTheme() : preference;
|
|
applyTheme(this.active, this.preference);
|
|
|
|
try {
|
|
localStorage.setItem(STORAGE_KEY, preference);
|
|
} catch (_err) {
|
|
// Ignore storage failures in private contexts.
|
|
}
|
|
},
|
|
},
|
|
});
|