Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
Detect system color scheme preference
import { useColorScheme } from '@kivora/react';
function ThemedComponent() {
const scheme = useColorScheme();
return (
<div className={scheme === 'dark' ? 'dark-theme' : 'light-theme'}>
Current theme: {scheme}
</div>
);
}
const scheme = useColorScheme();
return (
<div className={scheme === 'dark' ? 'bg-gray-900' : 'bg-white'}>
{/* Content */}
</div>
);
const scheme = useColorScheme();
return (
<>
{scheme === 'dark' ? (
<img src="logo-dark.png" alt="Logo" />
) : (
<img src="logo-light.png" alt="Logo" />
)}
</>
);
function App() {
const systemScheme = useColorScheme();
const [theme, setTheme] = useState(() => {
return localStorage.getItem('theme') || systemScheme;
});
useEffect(() => {
if (!localStorage.getItem('theme')) {
setTheme(systemScheme);
}
}, [systemScheme]);
return <div data-theme={theme}>{/* App content */}</div>;
}
window.matchMedia('(prefers-color-scheme: dark)')'light' by default when system preference cannot be determinedfunction useColorScheme(): 'light' | 'dark';