css - 如何从文件中加载动态 CSS 变量？

Question

我想在我的家庭仪表板上添加一个日/夜颜色模式，该模式将根据一些外部条件进行切换。

在下面的示例代码中，“外部条件”是按下按钮，它计算 CSS 变量的新值，然后在该<style>部分中使用：

new Vue({
  el: "#app",
  data: {
    switchme: true
  },
  computed: {
    colors() {
      if (this.switchme) {
        return {
          '--fg': 'green',
          '--bg': 'red'
        }
      } else {
        return {
          '--fg': 'blue',
          '--bg': 'yellow'
        }
      }
    }
  }
})

#square {
  background-color: var(--bg);
  color: var(--fg);
  font-family: sans-serif;
  font-weight: bolder;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" :style="colors">
  <div id="square">{{switchme}}</div>
  <button @click="switchme=!switchme">switchme</button>
</div>

在仪表板的实际代码中，将定义更多变量，colors()计算变量在视觉上会很大且冗长。在渲染 CSS 颜色时，它也不使用 IDE 的功能。

我的问题：有没有办法修改这样的代码说“如果然后从文件加载变量，否则从加载变量”switchmetruedark.csslight.css？
（可以预加载文件的内容，例如在 中mounted()）

如果是这样，我相信加载的 CSS 文件会类似于下面的内容？（颜色取决于模式）

:root {
  --bg: green;
  --fg: red;
}

标签： cssvue.js