The useTheme hook provides access to the application’s theming system, allowing components to react to theme changes and update theme settings.
Import
import { useTheme } from '../contexts/ThemeContext';
Usage
import { useTheme } from '../contexts/ThemeContext';
export function Dashboard() {
const { currentTheme } = useTheme();
return (
<div style={{
backgroundColor: currentTheme.colors.background,
color: currentTheme.colors.text
}}>
<h1>Dashboard</h1>
</div>
);
}
Return value
The hook returns an object with the following properties:
The currently active theme object containing all theme configuration.
Unique theme identifier (e.g., “light”, “dark”, “professional”)
Display name for the theme
Color palette for the theme
Surface/card background color
Sidebar hover state color
Typography configurationShow Typography properties
Font family for subheadings
Font family for body text
Font family for UI elements
Button styling configuration
style
'rounded' | 'square' | 'pill'
Button shape style
Whether buttons have shadows
Whether buttons are animated
setTheme
(themeId: ThemeType) => void
Function to change the active theme. The theme selection is persisted to localStorage.
Current font size as a percentage (default: 100). Range typically 80-120.
Function to update the font size percentage. The value is persisted to localStorage.
buttonStyle
'rounded' | 'square' | 'pill'
Current button style preference.
setButtonStyle
(style: 'rounded' | 'square' | 'pill') => void
Function to change the button style. The selection is persisted to localStorage.
Available themes
DoctorSoft+ includes the following built-in themes:
light - Light theme with blue accentdark - Dark theme with blue accentprofessional - Professional teal thememodern - Modern purple thememinimal - Minimalist gray themeocean - Ocean blue themeforest - Forest green themesunset - Sunset orange themeforest-night - Dark forest themeocean-breeze - Light ocean themesunset-orange - Bright sunset themeforest-green - Deep forest themeterra-cotta - Terra cotta earth tonesage-clay - Sage and clay themedesert-sand - Desert sand themewalnut-bark - Walnut bark theme
Error handling
The hook will throw an error if used outside of a ThemeProvider:
if (context === undefined) {
throw new Error('useTheme must be used within a ThemeProvider');
}
ThemeProvider:
import { ThemeProvider } from './contexts/ThemeContext';
function App() {
return (
<ThemeProvider>
{/* Your app components */}
</ThemeProvider>
);
}
CSS variables
The ThemeProvider automatically applies theme colors as CSS variables on the document root:
:root {
--color-primary: #3B82F6;
--color-secondary: #60A5FA;
--color-background: #F3F4F6;
--color-surface: #FFFFFF;
--color-text: #111827;
/* ... and more */
--font-headings: "Plus Jakarta Sans", sans-serif;
--font-subheadings: "Montserrat", sans-serif;
--font-body: "Inter", sans-serif;
--font-ui: "DM Sans", sans-serif;
--user-font-size-percentage: 100;
}
.my-component {
background-color: var(--color-surface);
color: var(--color-text);
font-family: var(--font-body);
}
- CSS variables are updated using
requestAnimationFrame
- Theme preferences are loaded synchronously on module load for instant theme application
- Context value is memoized using
useMemo
- CSS variable updates are memoized to avoid recalculations
Type definitions
~/workspace/source/src/contexts/ThemeContext.tsx
interface ThemeContextType {
currentTheme: Theme;
setTheme: (themeId: ThemeType) => void;
fontSize: number;
setFontSize: (size: number) => void;
buttonStyle: Theme['buttons']['style'];
setButtonStyle: (style: Theme['buttons']['style']) => void;
}
type ThemeType = 'light' | 'dark' | 'professional' | 'modern' |
'minimal' | 'ocean' | 'forest' | 'sunset' | 'forest-night' |
'ocean-breeze' | 'sunset-orange' | 'forest-green' | 'terra-cotta' |
'sage-clay' | 'desert-sand' | 'walnut-bark';