vue2如何控制页面内所有组件的背景颜色为亮色或者暗色？

在 Vue.js 中，如果你想要控制整个应用的所有组件的背景颜色，通常我们会利用全局 CSS 或者利用 Vue 的 `v-bind:class` 功能以及自定义指令来实现。这里有两个建议的方法：

1. **全局 CSS**:
创建一个全局 CSS 文件（例如：`global.css`），并在项目根目录下引入：

/* global.css */
body, [v-cloak] {
  /* 如果你想统一变亮或变暗 */
  --my-bg-color: lightgray; /* 可以换成你喜欢的颜色，如 white 或 darkgray */
  background-color: var(--my-bg-color);
}

/* 或者分别针对亮色和暗色 */
.dark-theme {
  --my-bg-color: darkgray;
}

.light-theme {
  --my-bg-color: white;
}

然后在你的 Vue 组件上应用主题：

<template>
  <div :class="{ 'dark-theme': isDarkTheme, 'light-theme': !isDarkTheme }"></div>
</template>

<script>
export default {
  data() {
    return {
      isDarkTheme: false,
    };
  },
  // ... 其他代码
};
</script>

使用 `v-bind:class` 来切换 `dark-theme` 和 `light-theme` 类。

2. **Vue 自定义指令**:
创建一个自定义指令，比如 `theme`：

// directives.js
import Vue from 'vue';

Vue.directive('theme', {
  bind(el, binding, vnode) {
    el.style.backgroundColor = binding.value ? 'darkgray' : 'white';
  },
});

然后在模板中使用：

<template>
  <div theme="{{ isDarkTheme }}">...</div>
</template>
<script>
export default {
  data() {
    return {
      isDarkTheme: false,
    };
  },
  // ... 其他代码
};
</script>