Dark Mode

Dark Mode

Add dark mode support in under 5 minutes.

The Approach

Flint UI uses CSS custom properties under the hood. Switching themes is just swapping a token set — no re-render, no flash of unstyled content.

typescript
1import { FlintProvider, useTheme } from '@flint-ui/core'
2import { lightTheme, darkTheme } from '@flint-ui/themes'
3

4function ThemeToggle() {
5  const { theme, setTheme } = useTheme()
6  return (
7    <Button
8      onClick={() =>
9        setTheme(theme === 'light' ? darkTheme : lightTheme)
10      }
11    >
12      {theme === 'light' ? '🌙' : '☀️'}
13    </Button>
14  )
15}

Theme toggle with useTheme hook

System Preference Detection

typescript
1import { useMediaQuery } from '@flint-ui/core'
2

3function App() {
4  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
5  return (
6    <FlintProvider theme={prefersDark ? darkTheme : lightTheme}>
7      <YourApp />
8    </FlintProvider>
9  )
10}

Automatic dark mode based on system preference

Custom Dark Theme

typescript
1const myDarkTheme = {
2  colors: {
3    background: '#0a0a0a',
4    surface: '#1a1a1a',
5    text: '#e5e5e5',
6    primary: '#818cf8',
7    border: '#2a2a2a',
8  },
9  shadows: {
10    sm: '0 1px 2px rgba(0,0,0,0.5)',
11    md: '0 4px 6px rgba(0,0,0,0.5)',
12  }
13}

Override dark theme tokens for your brand

Tip: Test your dark theme with a color contrast checker. WCAG AA requires 4.5:1 for body text and 3:1 for large text.