endo UI致力于新的開發，來滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗的Vue組件，幫助開發人員構建下一代應用程序。它是為Vue技術框架提供可用的Kendo UI組件，以便更快地構建更好的Vue應用程序。

每個Kendo UI for Vue使主題包都包含主題的源文件，作為構建過程的一部分，您可以修改源文件并重新構建主題。例如可以更改主題顏色、刪除未使用組件的 CSS 或使用特定主題顏色來設置應用程序的樣式，主題源文件位于主題包的 scss 文件夾中。

Kendo UI官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網

要使用主題變量構建自定義主題，請應用以下任一方法：

• （推薦）使用應用程序的構建過程——這種方法簡化了對新組件和主題包版本的升級。
• 使用主題的構建過程——這種方法要求您在每次更新主題包時構建主題。

要獲得主題的視覺預覽，請使用ThemeBuilder應用程序，它有一個用戶友好的界面，您可以在其中預覽所有組件并嘗試多種顏色樣本。

使用應用程序的構建過程

• 要使用Node Sass（它使用 LibSass），請運行npm install node-sass --save命令。
• 要使用Dart Sass，請運行npm install sass --save命令。

// App.scss
@import "~@progress/kendo-theme-default/dist/all.scss";

通過此設置，您可以直接在應用程序中自定義主題變量，例如您可以使用以下行將默認原色從橙色更改為粉紅色：

$primary: #ff69b4;

@import "~@progress/kendo-theme-default/dist/all.scss";

dist/all文件為主題中可用的所有組件添加樣式，要縮小生成的CSS大小，請僅導入您在應用程序中使用的組件源代碼，您可以在 scss/ 文件夾中找到它們。

// Import only the PanelBar and Grid styles using Node Sass
@import "~@progress/kendo-theme-default/scss/panelbar/_index.scss";
@import "~@progress/kendo-theme-default/scss/grid/_index.scss";

// or using Dart Sass
@import "~@progress/kendo-theme-default/scss/panelbar/";
@import "~@progress/kendo-theme-default/scss/grid/";

使用主題的構建過程

雖然每個Kendo UI for Vue主題都有一個專用的NPM包（例如，@progress/kendo-theme-default），但所有主題的源代碼都位于 kendo-themes 存儲庫中，存儲庫包含將主題源編譯為 CSS 的構建任務。要自定義主題，修改主題的源代碼，并使用構建任務為您的應用程序生成 CSS 文件。這種方法避免了在編譯 SCSS 時設置構建配置的需要，但可能更難維護，因為每次更新主題時都必須重復該過程。

注意：為了改進開發過程，每個主題的先前獨立 GitHub 存儲庫被合并到單個 kendo-themes 存儲庫中，并且各個存儲庫被存檔。

使用顏色自定義主題

樣本是一組自定義主題外觀的變量。

• 每個樣本都放置在一個單獨的文件中，一個主題可能包含多個顏色板。
• 顏色板對于創建多個持久的主題變體很有用。
• .css 輸出文件可以跨項目共享，無需進一步處理。

要創建樣本：

1. 復制kendo-themes GitHub 存儲庫。
2. 安裝node-gyp。
3. 使用 npm install && npx lerna bootstrap 安裝所有主題的依賴項。
4. 將工作目錄切換到 packages/<THEME_NAME>。
5. 在 scss/swatches 文件夾中創建一個 SWATCH_NAME.scss 樣本文件。
6. 要為主題構建顏色板，請鍵入 npm run sass:swatches 或 npm run dart:swatches。
7. 在您的項目中包含已編譯的CSS樣本文件，還可以在 dist/SWATCH_NAME.css 下找到它。

例如，在 Material 主題中創建一個帶有以下行的藍色-粉色-深色顏色板：

// Variables.
$primary-palette-name: blue;
$secondary-palette-name: pink;
$theme-type: dark;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

// Alternatively, include all components.
@import "../all.scss";

對于 Default 和 Bootstrap 主題，樣本應如下所示：

// Variables.
$primary: blue;
$secondary: pink;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

// Alternatively, include all components.
@import "../all.scss";

自定義源代碼

通過修改主題源代碼創建自定義主題：

1. 復制kendo-themes GitHub 存儲庫。
2. 使用 npm install && npx lerna bootstrap 安裝所有主題的依賴項。
3. 在 packages/THEME_NAME/scss/_variables.scss 文件中自定義主題變量。
4. 使用 npm run sass 或 npm run dart 命令構建主題，以在 packages/THEME_NAME/dist/all.css 文件中創建主題的自定義版本。
5. 構建完成后，使用編譯后的 CSS。

創建自定義組件包

您可能希望在 CSS 輸出中省略某些組件的樣式，要僅包含您需要的樣式：

1. 復制 kendo-themes GitHub存儲庫。
2. 使用 npm install && npx lerna bootstrap 安裝所有主題的依賴項。
3. 將工作目錄切換到 packages/<THEME_NAME>。
4. 在 scss 文件夾中創建 CUSTOM_THEME.scss 文件， 例如使用以下行創建 custom.scss 文件：

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

1. 要構建文件，請導航到主題文件夾并運行 gulp sass --file "scss/CUSTOM_THEME.scss"。
2. 在項目中包含編譯后的 CSS 文件，您可以在 dist/CUSTOM_THEME.css 下找到它。

文為Varlet組件庫源碼主題閱讀系列第六篇，Varlet支持自定義主題及暗黑模式，本篇文章我們來詳細看一下這兩者的實現。

主題定制

Varlet是通過css變量來組織樣式的，什么是css變量呢，其實很簡單，首先聲明自定義的css屬性，隨便聲明在哪個元素上都可以，不過只有該元素的后代才能使用，所以如果要聲明全局所有元素都能使用的話，可以設置到根偽類:root下：

:root {
  --main-bg-color: red;
}

如代碼所示，css變量的自定義屬性是有要求的，需要以--開頭。

然后在任何需要使用該樣式的元素上通過var()函數調用即可：

div {
  background-color: var(--main-bg-color);
}

只要更改了--main-bg-color屬性的值，所有使用該樣式變量的地方都會更新，所以主題定制靠的就是這個。

Varlet組件的樣式變量總體分為兩種：基本的、組件自身的。

公共的基本樣式變量定義在varlet-ui/src/styles/目錄下：

每個組件都會引入這個文件，比如Button組件：

除此之外每個組件也會有自身的變量，同樣比如Button組件：

想要修改默認的值也很簡單，直接覆蓋即可。運行時動態更新樣式也可以直接修改根節點的樣式變量，此外Varlet也提供了一個組件來幫我們做這件事，接下來看看這個組件是怎么實現的。

組件式調用

組件式調用可以有范圍性的定制組件樣式，避免全局污染，使用示例：

<script setup>
import { ref, reactive } from 'vue'

const state=reactive({
  score: 5,
})

const styleVars=ref({
  '--rate-primary-color': 'var(--color-success)',
})
</script>

<template>
  <var-style-provider :style-vars="styleVars">
    <var-rate v-model="state.score" />
  </var-style-provider>
</template>

StyleProvider組件源碼如下：

<script lang="ts">
import { defineComponent, h } from 'vue'
import { formatStyleVars } from '../utils/elements'
import { call, createNamespace } from '../utils/components'

const { n }=createNamespace('style-provider')

export default defineComponent({
  name: 'VarStyleProvider',
  props: {
    styleVars: {
      type: Object,
      default: ()=> ({}),
    },
  },
  setup(props, { slots }) {
    return ()=>
      h(
        'div',
        {
          class: n(),
          style: formatStyleVars(props.styleVars),
        },
        call(slots.default)
      )
  },
})
</script>

實現很簡單，就是創建一個div元素來包裹組件，然后將css變量設置到該div上，這樣這些css變量只會影響它的子孫元素。

函數式調用

除了使用組件，也可以通過函數的方式使用，但是只能全局更新樣式：

<script setup>
import { StyleProvider } from '@varlet/ui'

let rootStyleVars=null

const darkTheme={
  '--color-primary': '#3f51b5'
}

const toggleRootTheme=()=> {
  rootStyleVars=rootStyleVars ? null : darkTheme
  StyleProvider(rootStyleVars)
}
</script>

<template>
  <var-button type="primary" block @click="toggleRootTheme">切換根節點樣式變量</var-button>
</template>

StyleProvider函數如下：

const mountedVarKeys: string[]=[]

function StyleProvider(styleVars: StyleVars | null={}) {
    // 刪除之前設置的css變量
    mountedVarKeys.forEach((key)=> document.documentElement.style.removeProperty(key))
    mountedVarKeys.length=0
    // 將css變量設置到根元素上，并且添加到mountedVarKeys數組
    const styles: StyleVars=formatStyleVars(styleVars)
    Object.entries(styles).forEach(([key, value])=> {
        document.documentElement.style.setProperty(key, value)
        mountedVarKeys.push(key)
    })
}

實現也非常簡單，直接將css變量設置到html節點上，同時會添加到一個數組里，用于刪除操作。

暗黑模式

Varlet內置提供了暗黑模式的支持，使用方式為：

<script setup>
import dark from '@varlet/ui/es/themes/dark'
import { StyleProvider } from '@varlet/ui'

let currentTheme=null

const toggleTheme=()=> {
  currentTheme=currentTheme ? null : dark
  StyleProvider(currentTheme)
}
</script>

<template>
  <var-button block @click="toggleTheme">切換主題</var-button>
</template>

也調用了前面的StyleProvider方法，所以實現原理也是通過css變量，其實就是內置了一套暗黑模式的css變量：

總結

可以發現使用css變量來實現主題定制和暗黑模式是非常簡單的，兼容性也非常好，各位如果有涉及到換膚的需求都可以優先考慮使用。

vue使用scss、less切換主題（scss篇），進來就是賺到

**引言**

在Vue項目開發中，樣式管理是至關重要的環節。SCSS作為一種CSS預處理器，以其強大的變量、嵌套、混入等特性深受開發者喜愛。本文將聚焦于如何在Vue項目中通過SCSS實現主題切換功能，助你輕松打造可定制化的Web應用界面。

## **一、搭建基于SCSS的Vue項目**

首先，我們需要在Vue CLI創建的項目中啟用并配置SCSS支持。

### **1.1 創建Vue項目并安裝相關依賴**

```bash

vue create my-project

cd my-project

npm install sass-loader node-sass -D

```

### **1.2 配置webpack處理SCSS文件**

打開或創建`vue.config.js`文件，并添加以下配置：

```javascript

module.exports={

css: {

loaderOptions: {

scss: {

additionalData: `@import "@/styles/variables.scss"; // 引入全局變量文件`

}

}

}

};

```

這里引入了一個全局的`variables.scss`文件，用于存儲主題相關的變量。

## **二、定義主題變量與組件樣式**

### **2.1 定義主題變量**

在`src/styles/variables.scss`中定義基礎主題顏色：

```scss

$primary-color: #007bff;

$secondary-color: #6c757d;

// ... 其他主題變量

```

### **2.2 組件中引用主題變量**

在組件的SCSS文件中，可以這樣引用全局變量：

```scss

// src/components/MyComponent.vue

<style lang="scss">

.my-component {

background-color: $primary-color;

color: $secondary-color;

}

</style>

```

## **三、動態切換主題**

### **3.1 創建多個主題變量文件**

為了實現主題切換，我們可以創建多個主題變量文件，如`variables_dark.scss`和`variables_light.scss`。

### **3.2 在JavaScript中切換主題**

```javascript

// src/store/index.js 或者其他邏輯控制模塊

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({

state: {

theme: 'light' // 初始主題為“亮色”

},

mutations: {

switchTheme(state, theme) {

state.theme=theme; // 更新主題狀態

// 更改全局SCSS變量數據

const styleTag=document.createElement('style');

styleTag.innerHTML=`

@import '@/styles/variables_${state.theme}.scss';

`;

document.head.appendChild(styleTag);

}

},

actions: {

changeToDarkTheme({ commit }) {

commit('switchTheme', 'dark');

},

changeToLightTheme({ commit }) {

commit('switchTheme', 'light');

}

}

});

```

### **3.3 調用主題切換方法**

在需要觸發主題切換的地方調用actions，例如在按鈕點擊事件中：

```html

<template>

<button @click="changeTheme">切換主題</button>

</template>

<script>

import { mapActions } from 'vuex';

export default {

methods: {

...mapActions(['changeToDarkTheme', 'changeToLightTheme']),

changeTheme() {

if (this.$store.state.theme==='light') {

this.changeToDarkTheme();

} else {

this.changeToLightTheme();

}

}

}

};

</script>

```

## **四、進階優化：動態注入SCSS變量**

由于上述方案每次切換主題都會創建新的`<style>`標簽，效率并不理想。更優雅的方式是利用Webpack的插件實現動態替換CSS變量。

一種可行的方法是使用`webpack-theme-color-replacer-plugin`或者其他類似的插件，在編譯階段替換指定的CSS變量值，以達到動態切換主題的效果。

總結：

本文詳細介紹了如何在Vue項目中利用SCSS實現主題切換功能，從定義主題變量、編寫組件樣式，再到通過Vuex管理主題狀態以及JS操作DOM動態更改主題。雖然直接通過插入`<style>`標簽的方式簡單易懂，但實際生產環境中推薦采用Webpack插件進行更高效的變量替換。掌握這一技術，無疑將極大地提升你的Vue項目靈活性與用戶體驗。