Files
EasyCLIProxyAPI/src/theme.ts
T

55 lines
1.7 KiB
TypeScript

import { getCurrentWebview } from '@tauri-apps/api/webview';
import { getCurrentWindow } from '@tauri-apps/api/window';
export type AppTheme = 'light' | 'dark';
const STORAGE_KEY = 'easy-cli-proxy-api.theme';
const WINDOW_BACKGROUND: Record<AppTheme, string> = {
light: '#faf9f5',
dark: '#101419',
};
async function applyNativeTheme(theme: AppTheme): Promise<void> {
const background = WINDOW_BACKGROUND[theme];
const currentWindow = getCurrentWindow();
const currentWebview = getCurrentWebview();
await Promise.allSettled([
currentWindow.setTheme(theme),
currentWindow.setBackgroundColor(background),
currentWebview.setBackgroundColor(background),
]);
}
export function detectInitialTheme(): AppTheme {
if (typeof window === 'undefined') return 'light';
try {
const saved = window.localStorage.getItem(STORAGE_KEY);
if (saved === 'light' || saved === 'dark') return saved;
} catch {
// Storage may be unavailable in a restricted WebView; use the OS preference.
}
return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
export function applyTheme(theme: AppTheme): void {
document.documentElement.dataset.theme = theme;
document.documentElement.style.colorScheme = theme;
document.documentElement.style.backgroundColor = WINDOW_BACKGROUND[theme];
if (document.body) {
document.body.style.backgroundColor = WINDOW_BACKGROUND[theme];
}
void applyNativeTheme(theme);
}
export function saveTheme(theme: AppTheme): void {
applyTheme(theme);
try {
window.localStorage.setItem(STORAGE_KEY, theme);
} catch {
// The in-memory theme still works when persistent storage is unavailable.
}
}