b1dea9a5c2
- Added a new task store in `src-react/stores/task.ts` to manage tasks and their statuses. - Implemented functions for creating, executing, and retrying tasks, along with handling task progress and completion. - Introduced persistence for tasks using IPC. - Created utility functions for normalizing room types and building subtasks. - Added a new CSS file for global styles in `src-react/styles.css`. - Created runtime types in `src-react/types/runtime.ts` and exported them. - Updated the main entry points for Vue and React applications to support dynamic framework loading. - Refactored chat model interfaces and utility functions into `src/shared/chat-model.ts`. - Updated TypeScript configuration to include paths for React components and types. - Enhanced Vite configuration to support both Vue and React frameworks.
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import type { ResolvedThemeMode, ThemeMode } from '../types/runtime';
|
|
|
|
export function detectSystemTheme(): ResolvedThemeMode {
|
|
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
|
|
return 'light';
|
|
}
|
|
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
export function resolveAppliedTheme(
|
|
themeMode: ThemeMode,
|
|
systemTheme: ResolvedThemeMode = detectSystemTheme(),
|
|
): ResolvedThemeMode {
|
|
return themeMode === 'system' ? systemTheme : themeMode;
|
|
}
|
|
|
|
export function applyThemeModeToDocument(
|
|
themeMode: ThemeMode,
|
|
systemTheme: ResolvedThemeMode = detectSystemTheme(),
|
|
): ResolvedThemeMode {
|
|
const appliedTheme = resolveAppliedTheme(themeMode, systemTheme);
|
|
|
|
if (typeof document !== 'undefined') {
|
|
const root = document.documentElement;
|
|
root.classList.toggle('dark', appliedTheme === 'dark');
|
|
root.dataset.theme = appliedTheme;
|
|
root.style.colorScheme = appliedTheme;
|
|
}
|
|
|
|
return appliedTheme;
|
|
}
|
|
|
|
export function watchSystemTheme(onChange: (theme: ResolvedThemeMode) => void): () => void {
|
|
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
|
|
return () => {};
|
|
}
|
|
|
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const handler = (event: MediaQueryListEvent) => {
|
|
onChange(event.matches ? 'dark' : 'light');
|
|
};
|
|
|
|
if (typeof mediaQuery.addEventListener === 'function') {
|
|
mediaQuery.addEventListener('change', handler);
|
|
return () => mediaQuery.removeEventListener('change', handler);
|
|
}
|
|
|
|
mediaQuery.addListener(handler);
|
|
return () => mediaQuery.removeListener(handler);
|
|
}
|