c87d36e118
- Add ThemeContext with support for dark, gray, light, and custom themes - Create theme switching UI in Settings with theme selector - Add custom color editor for custom theme mode - Update styles.css with theme-specific CSS variables - Add theme storage API methods for persistence - Update syntax highlighting to match selected theme - Wrap App with ThemeProvider for global theme access The theming system allows users to switch between predefined themes or create their own custom theme with live color editing.
24 lines
829 B
TypeScript
24 lines
829 B
TypeScript
import { useThemeContext } from '../contexts/ThemeContext';
|
|
|
|
/**
|
|
* Hook to access and control the theme system
|
|
*
|
|
* @returns {Object} Theme utilities and state
|
|
* @returns {ThemeMode} theme - Current theme mode ('dark' | 'gray' | 'light' | 'custom')
|
|
* @returns {CustomThemeColors} customColors - Custom theme color configuration
|
|
* @returns {Function} setTheme - Function to change the theme mode
|
|
* @returns {Function} setCustomColors - Function to update custom theme colors
|
|
* @returns {boolean} isLoading - Whether theme operations are in progress
|
|
*
|
|
* @example
|
|
* const { theme, setTheme } = useTheme();
|
|
*
|
|
* // Change theme
|
|
* await setTheme('light');
|
|
*
|
|
* // Update custom colors
|
|
* await setCustomColors({ background: 'oklch(0.98 0.01 240)' });
|
|
*/
|
|
export const useTheme = () => {
|
|
return useThemeContext();
|
|
}; |