mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-17 05:28:09 +01:00
59 lines
1.5 KiB
Markdown
59 lines
1.5 KiB
Markdown
---
|
|
title: 'Dark mode'
|
|
description: ''
|
|
---
|
|
|
|
All the components are styled with dark mode in mind.
|
|
|
|
Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
|
|
|
|
You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
colorMode: {
|
|
preference: 'light'
|
|
}
|
|
})
|
|
```
|
|
|
|
::callout{icon="i-heroicons-light-bulb"}
|
|
If you're stuck in dark mode even after changing this setting, you might need to remove the `nuxt-color-mode` entry from your browser's local storage.
|
|
::
|
|
|
|
You can easily build a color mode button by using the `useColorMode` composable from `@nuxtjs/color-mode`.
|
|
|
|
::component-example
|
|
#default
|
|
:color-mode-button
|
|
|
|
#code
|
|
```vue
|
|
<script setup lang="ts">
|
|
const colorMode = useColorMode()
|
|
const isDark = computed({
|
|
get () {
|
|
return colorMode.value === 'dark'
|
|
},
|
|
set () {
|
|
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<ClientOnly>
|
|
<UButton
|
|
:icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
|
|
color="gray"
|
|
variant="ghost"
|
|
aria-label="Theme"
|
|
@click="isDark = !isDark"
|
|
/>
|
|
<template #fallback>
|
|
<div class="w-8 h-8" />
|
|
</template>
|
|
</ClientOnly>
|
|
</template>
|
|
```
|
|
::
|