使用 Vue 在运行时更改应用程序主题

Question

我有一个 Vue Js 应用程序 (V2)，它的结构如下（缩短以关注问题）：

_variables.scss

$brand-theme:#F5F5F5

并像 vue.config.js

中那样通过 sass 加载器加载

@import "@/assets/scss/_variables.scss";

因此，在我的各种 Vue 组件中，我可以像这样引用（这在一些 Vue 文件中使用，而不仅仅是 App.Vue 例如）

  .button {
    width: 100%;
    text-align: center;
    background: $brand-theme;
    ....

我有一个要求，我需要检查 URL，并在渲染之前的运行时更改此值，例如通过操纵 dom 或其他有效方法。

经过一些初步研究，我发现使用当前的结构存在问题，这促使我重新考虑该方法，但我很想知道是否有一种方法可以通过最少的代码更改来做到这一点，因为是。

提前致谢。

Answer 1

将值分配给 CSS 变量，在 #app 元素上：

<style lang="scss">
  #app {
    --brand-theme: $brand-theme;
  }
</style>

在任何组件中：

<style>
  .button {
    background-color: var(--brand-theme);
  }
</style>

在运行时更改 #app 元素或其任何后代的 --brand-theme 变量的值，将影响该元素和任何阅读 var(--brand-theme).[=18= 的子元素]

从 JS 更改 CSS 变量的值很容易：

document.querySelector('#app').style.setProperty('--brand-theme', newValue);
// or, on <div id="app" ref="myApp">
this.$refs['myApp'].style.setProperty('--brand-theme', newValue);

你也可以使用这个语法：

<div :style="{ '--brand-theme': dataDrivenValue }" />

使用 Vue 在运行时更改应用程序主题

Change App Theme during runtime using Vue

javascript

css

vue.js

vuejs2

sass-loader