# oui-dark
Toggle button that switches between light and dark mode using [VueUse `useDark`](https://vueuse.org/core/useDark/). Adds or removes the `.dark` class on the `` element, which all Oui CSS variables respond to.
## Usage
```ts
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark()
const toggleDark = useToggle(isDark)
```
```vue
```
## Avoid flash of wrong theme
Add this script to your `index.html` `` to apply the correct class before Vue loads:
```html
```
## How dark mode works in Oui
Dark mode is controlled by the `.dark` class on the `` element. All Oui CSS variables have `.dark` overrides:
```css
/* Light (default) */
:root { --fg: #0a0a0a; --bg: white; }
/* Dark */
.dark { --fg: var(--n0-50); --bg: var(--n0-950); }
```
Do **not** rely solely on `@media (prefers-color-scheme: dark)` — always use the `.dark` class so user choice overrides the system preference.