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项目灵活性与用户体验。