返回

用 ant-design-vue + vite 实现主题切换和夜间模式

前端

主题切换与夜间模式：使用 ant-design-vue 和 Vite 的轻松实现

实现主题切换

现代 Web 开发中，主题切换功能日益流行，允许用户根据个人喜好自定义界面外观。本文将引导您使用 ant-design-vue 和 Vite 轻松实现这一功能。

准备主题样式

第一步是创建两个主题样式文件，一个用于白天模式，另一个用于夜间模式。可以使用 less 作为 CSS 预处理器。

修改构建配置

在 vite.config.js 中，添加以下配置以启用 less 编译。

// vite.config.js
const { defineConfig } = require('@vue/define-config');
module.exports = defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
});

创建主题切换组件

接下来，创建一个 ThemeSwitch 组件来切换主题样式。Vue 的 <style> 标签用于动态加载样式文件。

ThemeSwitch.vue

<template>
  <div>
    <button @click="changeTheme('light')">白天模式</button>
    <button @click="changeTheme('dark')">夜间模式</button>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const theme = reactive('light');

    const changeTheme = (newTheme) => {
      theme.value = newTheme;
    };

    return {
      theme,
      changeTheme
    };
  }
});
</script>

<style>
[data-theme='light'] {
  --theme-color: #000;
  --theme-background-color: #fff;
}
[data-theme='dark'] {
  --theme-color: #fff;
  --theme-background-color: #000;
}

body {
  background-color: var(--theme-background-color);
  color: var(--theme-color);
}
</style>

<style> 标签使用 [data-theme] 属性来指定当前主题，并使用 CSS 变量来动态地修改样式。

使用主题切换组件

最后，在 App.vue 中使用 ThemeSwitch 组件来启用主题切换。

App.vue

<template>
  <div>
    <ThemeSwitch />

    <p>Hello world!</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import ThemeSwitch from './ThemeSwitch.vue';

export default defineComponent({
  components: {
    ThemeSwitch
  }
});
</script>

现在，就可以在页面上看到主题切换组件了。点击按钮即可切换主题样式。

实现夜间模式

夜间模式是一种特殊主题，具有较深的背景色和较浅的文字颜色，以减少对眼睛的刺激。在 theme-dark.less 文件中添加以下样式：

body {
  background-color: #000;
  color: #fff;
}

在 ThemeSwitch 组件中，添加以下代码：

const changeTheme = (newTheme) => {
  if (newTheme === 'light') {
    document.documentElement.removeAttribute('data-theme');
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
};

现在，就可以在页面上看到夜间模式了，点击按钮即可切换主题样式。

结论

本文演示了如何使用 ant-design-vue 和 Vite 实现主题切换和夜间模式。通过使用 CSS 预处理器和动态加载样式文件，可以轻松实现这一功能。希望本文对您有所帮助。

常见问题解答

  1. 如何使用 Vite 构建项目？

    vite create ant-design-vue-project
cd ant-design-vue-project
npm install
npm run dev

  2. 如何添加 LESS 支持？
    在 package.json 中安装 less 并添加 vite 配置：

    npm install less --save
// vite.config.js
import { defineConfig } from '@vue/define-config';
module.exports = defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
});

  3. 如何使用 ThemeSwitch 组件？
    在 App.vue 中添加：

    <ThemeSwitch />

  4. 如何启用夜间模式？
    在 theme-dark.less 中添加样式并在 ThemeSwitch 组件中切换 data-theme 属性：

    // theme-dark.less
body {
  background-color: #000;
  color: #fff;
}
// ThemeSwitch.vue
if (newTheme === 'light') {
  document.documentElement.removeAttribute('data-theme');
} else {
  document.documentElement.setAttribute('data-theme', 'dark');
}

  5. 为什么我的主题切换不起作用？
    确保已正确安装依赖项、配置构建和使用 ThemeSwitch 组件。检查控制台是否有错误。