跳转至

Admin 项目实战（九）：暗色夜间模式

这是 Admin 练习项目的第九篇，练习如何使用 vueuse + unocss 实现夜间模式。

效果

点击模式切换图标，在普通模式与夜间模式进行切换。

project-practice-night-dark-mode-admin_2_23Sep22185121282328_1.jpeg

实现夜间模式

安装插件与图标

1
2
    pnpm i @vueuse/core @vueuse/head
    pnpm i -D @iconify/json

配置 Vite 与插件

配置 Vite 导出 vueuse API

增加 vueuse 插件，通过 autoimport 实现自动导入： 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
    // vite.config.ts
    export default defineConfig({
      //...
      plugins: [
        AutoImport({
          imports: [
            "vue",
            "vue-router",
            "pinia",
            "vue-i18n",
            "@vueuse/core",
            "@vueuse/head",
          ],
          dts: "src/auto-imports.d.ts",
          dirs: ["src/composables"],
          vueTemplate: true,
        }),
      ],
      //...
    });

在 Vite 导出时，配置 dirs 参数，对 composables 下的组件自动导出。同时设置 vueTemplate 支持 template。

增加 dark API

为 composite API 新建目录 composables ，增加 dark 组件： 

1
2
3
    // src\composables\dark.ts
    export const isDark = useDark();
    export const toggleDark = useToggle(isDark);

实现 Dark 组件

实现 Dark 组件的原理，是之前引入的原子样式中，已提供了 dark 样式。这里通过按钮调用插件进行切换：

  • 点击事件调用 toggleDark 函数，实现模式切换
  • 为按钮图标增加 dark 样式，使用 sun, moon 图标代表不同模式
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    <!--src\components\Dark.vue-->
    <template>
      <button class="mx-2 !outline-none text-2xl" @click="toggleDark()">
        <div class="i-carbon-sun dark:i-carbon-moon"></div>
      </button>
    </template>
    <script lang="ts">
    export default {};
    </script>
    <style lang=""></style>

支持夜间模式切换

在导航栏组件 Navbar 中加入夜间模式切换按钮： 

1
2
3
4
    <!--src\components\Navbar.vue-->
    <div class="flex items-center mt-4 md:mt-0">
      <Dark></Dark>
      <language></language>

启动项目，可以查看夜间模式切换效果。

上一课

Admin 项目实战（十）：菜单自动配置

凡本网注明"来源：XXX "的文/图/视频等稿件，本网转载出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性。如涉及作品内容、版权和其它问题，请与本网联系，我们将在第一时间删除内容！
作者: 勃纳什
来源： https://zhuanlan.zhihu.com/p/645611386