25 暗黑主题开发 - udo-bit/naive_admin_pro GitHub Wiki

目标

完成暗黑主题模式配置

开发

naive ui 本身对暗黑模式的支持度很好，所以我们使用他们的暗黑模式并没有太多的心智负担。 接下来我们一起来实现一下暗黑模式。 我们切到app.vue中。我们在一开始的时候已经配置了全局配置文件，所以我们先来看一下他的文档。 config-provider 我们直接可以通过配置theme属性可以实现暗黑主题 在app.vue中：

<script setup lang="ts">
import { darkTheme } from 'naive-ui'
</script>

<template>
  <n-config-provider :theme="darkTheme">
    <app-provider>
      <router-view />
    </app-provider>
  </n-config-provider>
</template>

我们会发现我们的内容区域并没有变成暗黑模式，那是因为我们在styles/vars中没有配置暗黑模式，那么我们来添加暗黑模式下的背景色以及阴影色。

html.dark{
    --pro-admin-layout-content-bg: #2A2C2C;
    --pro-admin-layout-box-shadow: 0 1px 3px 0 rgba(13,13,13,.18);
}

但是我们会发现当我们向上滚动向下滚动的时候，背景色还是白色。那么我们来调整一下。同样是在styles/vars.css中配置：

html{
    --pro-admin-layout-content-bg: #f0f2f5;
    --pro-admin-layout-box-shadow: 0 1px 3px 0 rgba(0,0,0,.18);
+    background: var(--pro-admin-layout-content-bg);
}

再看我们的背景色已经变成暗黑模式了。

动态切换暗黑模式

接下来我们实现一下动态切换暗黑模式，我们在之前开发完成的布局风格配置中添加一个暗黑模式的风格。 我们打开在config/layout-theme.ts文件，然后添加一个暗黑模式的类型。

export interface LayoutTheme {
  layoutStyle: 'inverted' | 'light' | 'dark'
}

我们通过切换layout中的layoutStyle主题的变化来实现我们动态切换主题。 我们打开stores/app.ts文件： 在这里我们通过计算属性返回我们的布局样式如下：

  const layoutTheme = computed(() => {
    if (layout.layoutStyle === 'dark')
      return darkTheme

    return undefined
  })

然后在app.vue中添加引用

<script setup lang="ts">
const appStore = useAppStore()
const { layoutTheme } = storeToRefs(appStore)
</script>

<template>
  <n-config-provider :theme="layoutTheme">
    <app-provider>
      <router-view />
    </app-provider>
  </n-config-provider>
</template>

我们现在pages/index.vue中来测试一下我们的暗黑主题模式。

<script lang="ts" setup>
import type { LayoutTheme } from '~/config/layout-theme'

const appStore = useAppStore()
const onSwitch = (theme: LayoutTheme['layoutStyle']) => {
  appStore.updateLayoutStyle(theme)
  if (theme === 'dark')
    document.documentElement.className = 'dark'
  else
    document.documentElement.removeAttribute('class')
}
</script>

<template>
  <div>
    <n-space>
      <n-button @click="onSwitch('light')">
        浅色
      </n-button>
      <n-button @click="onSwitch('dark')">
        深色
      </n-button>
    </n-space>
  </div>
</template>

测试切换

⚠️ **GitHub.com Fallback** ⚠️