N-UI

Appearance

暗色主题 ​

N-UI 内置暗黑主题支持，可通过 useTheme() 一键切换，也可通过 ThemeConfig.mode 控制。

通过 useTheme 切换 ​

vue
<script setup lang="ts">
import { useTheme } from '@n-ui/hooks'

const { isDark, toggleDark, setTheme } = useTheme()
</script>

<template>
  <button @click="toggleDark">
    {{ isDark ? '☀️ 亮色模式' : '🌙 暗黑模式' }}
  </button>
  <button @click="setTheme('dark')">暗黑主题</button>
</template>

通过 ThemeConfig 切换 ​

ts
import { useTheme } from '@n-ui/hooks'
import { darkTheme } from '@n-ui/themes'

const { applyCustomTheme } = useTheme()

applyCustomTheme(darkTheme)

通过 CSS 类名切换 ​

如需脱离 useTheme 手动控制，可直接操作 html 类名：

ts
function toggleDark() {
  document.documentElement.classList.toggle('dark')
}

暗色主题 Token ​

暗色主题自动覆盖所有颜色 Token，包括：

  • 文字颜色改为白色系
  • 背景颜色改为深色
  • 边框和填充颜色调整
  • 阴影使用更深的黑色

自定义暗色主题 ​

ts
import { useTheme } from '@n-ui/hooks'
import type { ThemeConfig } from '@n-ui/themes'

const { applyCustomTheme } = useTheme()

const darkBrand: ThemeConfig = {
  name: 'dark-brand',
  mode: 'dark',
  colors: {
    primary: '#a855f7',
    // ... 其他暗色 Token
  },
  // ...
}

applyCustomTheme(darkBrand)