Usage
Listen for changes to the system’s color scheme preference (light/dark mode) and react accordingly.
import { onSystemThemeChange, setTheme } from '@alex.radulescu/styled-static';
const unsubscribe = onSystemThemeChange((isDark) => {
if (!localStorage.getItem('theme')) {
setTheme(isDark ? 'dark' : 'light', false);
}
});
// Later: stop listening
unsubscribe();
Signature
function onSystemThemeChange(
callback: (prefersDark: boolean) => void
): () => void
Parameters
callback
(prefersDark: boolean) => void
required
Function called when the system preference changes. Receives a boolean indicating whether dark mode is preferred
Returns
A function to remove the event listener and stop receiving updates
Behavior
The function:
- Subscribes to the
prefers-color-scheme: dark media query
- Calls the callback whenever the system preference changes
- Returns an unsubscribe function to clean up the listener
- Returns a no-op function in environments where
matchMedia is unavailable
Examples
React to system changes
import { onSystemThemeChange, setTheme } from '@alex.radulescu/styled-static';
const unsubscribe = onSystemThemeChange((prefersDark) => {
if (!localStorage.getItem('theme')) {
setTheme(prefersDark ? 'dark' : 'light', false);
}
});
// Later: stop listening
unsubscribe();
Using with React
import { useEffect } from 'react';
import { onSystemThemeChange, setTheme } from '@alex.radulescu/styled-static';
function App() {
useEffect(() => {
// Subscribe to system theme changes
const unsubscribe = onSystemThemeChange((prefersDark) => {
// Only auto-switch if user hasn't set a preference
if (!localStorage.getItem('theme')) {
setTheme(prefersDark ? 'dark' : 'light', false);
}
});
// Cleanup on unmount
return unsubscribe;
}, []);
return <div>My App</div>;
}
Respect user preferences
import { initTheme, onSystemThemeChange, setTheme } from '@alex.radulescu/styled-static';
// Initialize with system preference
initTheme({ defaultTheme: 'light', useSystemPreference: true });
// Keep synced with system only if user hasn't overridden
onSystemThemeChange((prefersDark) => {
const userTheme = localStorage.getItem('theme');
// Only auto-switch if no user preference is stored
if (!userTheme) {
setTheme(prefersDark ? 'dark' : 'light', false);
}
});
Custom theme mapping
import { onSystemThemeChange, setTheme } from '@alex.radulescu/styled-static';
// Map system preference to custom themes
onSystemThemeChange((prefersDark) => {
if (!localStorage.getItem('theme')) {
// Use custom theme names
setTheme(prefersDark ? 'midnight' : 'daylight', false);
}
});