現(xiàn)在越來越多的網(wǎng)站支持主題切換，我們的也要！

在這，我們要實(shí)現(xiàn)兩個例子，主題切換與夜間模式！
主題切換：

夜間模式：

1、準(zhǔn)備工作，初始化一個簡單的vite項(xiàng)目

安裝 ant-design-vue和less

yarn add ant-design-vue@nextyarn add less --save

因?yàn)閍nt-design-vue是使用less開發(fā)的，所以既然用了它，咱最好還是用和它一致的less。

在main.ts中全局引入antd組件與樣式

import { createApp } from 'vue' import App from './App.vue'import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.less'createApp(App).use(Antd).mount('#app')

在App.vue中，我們將無用代碼去掉，加入一些antd的按鈕便于測試。

<template><a-button type="primary">Primary Button</a-button><a-button>Default Button</a-button><a-button type="dashed">Dashed Button</a-button><a-button type="text">Text Button</a-button><a-button type="link">Link Button</a-button> </template>

使用yarn dev啟動

發(fā)現(xiàn)報(bào)錯，原因是，我們引入的樣式是less文件，我們需要在vite.config.ts文件中開啟支持。

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],// 開啟less支持css: {preprocessorOptions: {less: {javascriptEnabled: true}}} })

重新啟動

2、切換主題

別嫌前面啰嗦，了解它創(chuàng)建的步驟，才能不跳坑。不然以后掉坑了也不知道怎么回事，比如上面的開啟less支持…

官網(wǎng)上對于主題的切換是有說明的：https://next.antdv.com/docs/vue/customize-theme-cn

也就是說我們可以通過修改這些less變量，達(dá)到我們定制化主題的目標(biāo)。

官網(wǎng)雖然沒有提供vite方式修改主題的說明，但是舉了vue cli ，webpack的例子，其實(shí)我們也能知道了，在vite中是差不多的，都是通過less中的modifyVars進(jìn)行修改。試試

css: {preprocessorOptions: {less: {modifyVars: {'primary-color': '#1DA57A','link-color': '#1DA57A','border-radius-base': '2px',},javascriptEnabled: true}} }

注意，這里都是字符串形式的鍵值對。

看一下主題，確實(shí)改變了。

但是這只是靜態(tài)的。咱想要實(shí)現(xiàn)的是，動態(tài)切換我們的主題，如何實(shí)現(xiàn)？

3、動態(tài)切換主題

這里我使用一個vite插件：vite-plugin-theme-preprocessor

一個vite v2.0+插件，用于實(shí)現(xiàn)多個 less、sass 變量文件編譯出多主題的 css，使得基于less、sass以及css modules的主題樣式在線動態(tài)切換變得很簡單。

原帖地址：傳送門

根據(jù)倉庫中的說明，我們需要先安裝插件：

yarn add @zougt/vite-plugin-theme-preprocessor -Dyarn add path --save

注意 path是用來解析路徑的，這在我們項(xiàng)目中很多地方都會用得到，同樣。這里也需要。

然后我們需要在vite.config.ts中使用這個插件。

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'import path from 'path'import themePreprocessorPlugin from "@zougt/vite-plugin-theme-preprocessor";export default defineConfig({plugins: [vue(),themePreprocessorPlugin({less: {// 各個主題文件的位置multipleScopeVars: [{scopeName: "theme-default",path: path.resolve("src/theme/default.less"),},{scopeName: "theme-green",path: path.resolve("src/theme/green.less"),},],},}),],// 開啟less支持css: {preprocessorOptions: {less: {modifyVars: {'primary-color': '#1DA57A','link-color': '#1DA57A','border-radius-base': '2px',},javascriptEnabled: true}}} })

上面，我們定義了兩個主題分別是：theme-default與 theme-green以及對應(yīng)得主題文件得位置。

我們切換主題就靠主題文件了。

接下來我們需要創(chuàng)建這兩個主題文件，并分別引入ant的樣式文件，注意是less格式。

@import "ant-design-vue/lib/style/themes/default.less"; // defalut.less // 上面引入了核心樣式文件，我們可以對其進(jìn)行修改，覆蓋原來的達(dá)到我們的目的。 // 這里不僅能修改變量還能修改樣式// 比如我修改以下// 全局主色 黃色 @primary-color: #ffa618; // 鏈接色 青色 @link-color: #18ffb2; @import "ant-design-vue/lib/style/themes/default.less";// green.less// 全局主色 綠色 @primary-color: #1cce42; // 鏈接色 粉紅色 @link-color: #c76f98;

注意：ant-design-vue/lib/style/themes/default.less這個路徑是沒有問題的，如果報(bào)錯了，請檢查你有沒有安裝easy less這個插件，有的話，禁用掉！

然后，我們就可以進(jìn)行主題切換的邏輯了！

我們邏輯比較簡單，我使用一個開關(guān)，打開是綠色，關(guān)閉是黃色。

在App.vue中

<template><a-button type="primary">Primary Button</a-button><a-button>Default Button</a-button><a-button type="dashed">Dashed Button</a-button><a-button type="text">Text Button</a-button><a-button type="link">Link Button</a-button><!-- 開關(guān)切換主題 --><a-switchv-model:checked="checked"checked-children="綠"un-checked-children="黃"@change="change"/> </template><script lang="ts"> import { defineComponent, ref } from "vue";import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils.js";export default defineComponent({setup() {const checked = ref<boolean>(false);// 切換主題回調(diào)const change = (value: boolean) => {// 如果開關(guān)打開，就切換為綠色主題，否則默認(rèn)黃色主題if (value) {toggleTheme({scopeName: "theme-green",});console.log("已切換為綠色主題");} else {toggleTheme({scopeName: "theme-default",});console.log("已切換為默認(rèn)主題");}};return {checked,change,};}, }); </script>

注意：如果你引入插件的時候報(bào)錯了，但其實(shí)這并不是錯，你需要關(guān)閉ts的嚴(yán)格檢查模式。也就是在tsconfig.json中"strict": false,
然后注意，這時候切換主題發(fā)現(xiàn)是無效的。

還記得你在vite.config.ts中自定義的主題嗎，將其刪掉或注釋掉，因?yàn)樗膬?yōu)先級比較高。

css: {preprocessorOptions: {less: {// modifyVars: {// 'primary-color': '#1DA57A',// 'link-color': '#1DA57A',// 'border-radius-base': '2px',// },javascriptEnabled: true}} }

這時候，我們片頭的效果就出來了。

4、夜間模式

這個有了前面的鋪墊就很簡單了，官方實(shí)現(xiàn)了一套暗黑主題，我們將green.less修改一下。

// @import "ant-design-vue/lib/style/themes/default.less"; // 修改為暗黑主題 @import "ant-design-vue/lib/style/themes/dark.less";// 全局主色 綠色 @primary-color: #1cce42; // 鏈接色 粉紅色 @link-color: #c76f98;

其他的也不用變

對于這類組件庫來說，如果沒有提供類似的暗黑模式，可能就需要一點(diǎn)點(diǎn)去改了，那耗費(fèi)的時間將是相當(dāng)巨大的。

5、總結(jié)

上面的主題切換不僅僅是對于ant-design-vue適用，還對所有的基于less和sass的適用，用法都是一樣的。

在這之前我們看多許多主題切換的方案，CSS變量、antd-theme-generator、還有一堆webpack的，但是這都不是我所需要的，有幸最終找到了ZGT大佬寫的vite-plugin-theme-preprocessor，確實(shí)是達(dá)到了我的期望。

總結(jié)

以上是生活随笔為你收集整理的ant-design-vue+vite主题切换详细步骤（简单案例）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。