YuzuZensai/Pien-Studio
1
0
Fork 0
mirror of https://github.com/YuzuZensai/Pien-Studio.git synced 2026-09-02 14:18:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: auto system theme

Browse Source
This commit is contained in:
yuzu
2026-05-16 11:53:38 +07:00
parent b00d9111a9
commit ff6afe5391
4 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/store/ui-store.ts
+14 -3
View File
@@ -2,16 +2,22 @@
import { create } from "zustand";
export type AppTheme = "light" | "dark";
export type AppTheme = "light" | "dark" | "system";
export type AppLocale = "en" | "th" | "ja";
const THEME_KEY = "pien.ui.theme";
const LOCALE_KEY = "pien.ui.locale";
function getSystemTheme(): "light" | "dark" {
if (typeof window === "undefined") return "light";
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
function readTheme(): AppTheme {
if (typeof window === "undefined") return "light";
const value = window.localStorage.getItem(THEME_KEY);
return value === "light" ? "light" : "dark";
if (value === "light" || value === "dark" || value === "system") return value;
return "system";
}
function readLocale(): AppLocale {
@@ -23,7 +29,12 @@ function readLocale(): AppLocale {
function applyTheme(theme: AppTheme): void {
if (typeof document === "undefined") return;
document.documentElement.setAttribute("data-theme", theme);
const resolved = theme === "system" ? getSystemTheme() : theme;
document.documentElement.setAttribute("data-theme", resolved);
}
export function isDarkTheme(theme: AppTheme): boolean {
return theme === "system" ? getSystemTheme() === "dark" : theme === "dark";
}
type UiState = {