Vue JS：如何从 vue 组件访问和更改 CSS 根变量以切换 CSS 变量站点主题？

Question

我想在 Vue 组件中访问项目中 css 根变量的值。例如，通过按按钮更改 10 个变量，包括颜色、边距和字体大小，然后按同一按钮将变量更改为其（默认）原始值，实际上是更改值项目中的 css 根变量。我怎样才能做到这一点 ？事实上，我想通过按一个按钮在黑暗和光明之间切换。

这个想法的灵感来自以下链接的更改。链接内的示例是用纯JavaScript脚本编写的，我想在Next Js Framework上开发的Vue项目中使用它。实现一个包含大约 10 个变量的网站，按下按钮以切换暗/亮模式，这些变量的值必须立即更改。

给我启发的 codepen 链接:)

如何访问和更改 CSS 根变量？

new Vue({
	el: "#theme",
	data: {
    return {
      dark: true,
      
    };
  },
  
  watch: {
    dark() {
    
      let bg = this.dark ? "#1b1b1b" : "#f5f5f5";
      let txtColor = this.dark ? "#999999" : "#333333";
      
      document.documentElement.style.setProperty("--bg", bg);
      document.documentElement.style.setProperty("--txt", txtColor);
      
    }
  }
});

:root{

--bg: white;
--txt: black;

}


body {
  background-color: var(--bg);
  color: var(--txt)
}
article {
  padding: 50px
}
article h2 {
  margin-top: 100px;
}

<div id="theme">

  <button @click="dark=!dark">dark</button>

<article>
  <h1>Hello World</h1>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean v
</article>

</div>

Answer 1

您的示例中存在语法错误data，但除此之外它工作正常。您想在页面加载后立即运行吗？

new Vue({
  el: "#theme",
  data() {
    return {
      dark: false,
      root: null
    };
  },
  mounted: function() {
    this.root = document.documentElement;
  },
  watch: {
    dark: {
      handler: function() {
        // because we are using this handler immideatly we need to wait for data changes using nextTick.
        this.$nextTick(() => {
          if (this.dark) {
            this.root.style.setProperty("--bg", "red");
            this.root.style.setProperty("--text", "black");
            this.root.style.setProperty("--padding", "10px");
            this.root.style.setProperty("--font", "1rem");
          } else {
            this.root.style.setProperty("--bg", "blue");
            this.root.style.setProperty("--text", "green");
            this.root.style.setProperty("--padding", "15px");
            this.root.style.setProperty("--font", "2rem");
          }
        })
      },
      immediate: true

    }
  }
});

:root {
  --bg: white;
  --bg-text: black;
  --padding: 5px;
  --font: 3rem;
}

body {
  background-color: var(--bg);
  color: var(--bg-text)
}

article {
  padding: 50px
}

article h2 {
  margin-top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="theme">

  <button @click="dark=!dark">dark</button>

  <article>
    <h1>Hello World</h1>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
    sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean v
  </article>

</div>