vue2使用less 实现暗黑模式

要在Vue2中使用Less实现暗黑模式，你需要进行以下步骤:

1. 安装Less和Less-Loader

在你的Vue2项目中，你需要安装Less和Less-Loader。你可以使用以下命令来安装它们：

npm install less less-loader --save-dev

2. 创建Less文件

接下来，你需要创建一个Less文件来设置你的暗黑模式。在这个文件中，你可以使用Less的变量和Mixin来定义颜色和样式。例如，下面是一个简单的示例：

@bg-color: #fff;
@text-color: #333;

body {
  background-color: @bg-color;
  color: @text-color;
}

.dark-mode {
  @bg-color: #333;
  @text-color: #fff;
}

在这个文件中，我们定义了两个变量，一个用于背景颜色，一个用于文本颜色。我们使用这些变量来设置body的背景和文本颜色。我们还定义了一个.dark-mode类，它将覆盖我们的变量，并将背景颜色和文本颜色设置为不同的值。

3. 在Vue组件中使用暗黑模式

现在我们已经定义了我们的Less文件，我们需要在Vue组件中使用它。我们可以使用Vue的计算属性来检查用户是否选择了暗黑模式，并在需要时将其应用到我们的组件中。例如：

<template>
  <div :class="{ 'dark-mode': isDarkMode }">
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDarkMode: false
    };
  },
  computed: {
    modeClass() {
      return this.isDarkMode ? 'dark-mode' : '';
    }
  }
}
</script>

<style lang="less">
@import './path/to/your/less/file.less';

body {
  background-color: @bg-color;
  color: @text-color;
}

.dark-mode {
  background-color: @bg-color;
  color: @text-color;
}
</style>

在这个例子中，我们创建了一个计算属性`modeClass`，当`isDarkMode`为`true`时返回`'dark-mode'`，否则返回空字符串。我们可以将这个属性应用到我们的组件中，并使用`:class`指令将其绑定到`<div>`元素上。

我们还使用`<style>`标签导入我们的Less文件，并在其中设置了组件的背景和文本颜色。我们也定义了一个`.dark-mode`类，它将覆盖我们的变量，并将背景颜色和文本颜色设置为不同的值。

这就是在Vue2中使用Less实现暗黑模式的基本步骤。你可以根据你的需求调整Less文件和Vue组件，以实现你想要的效果。