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

Question

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

这个想法的灵感来自于下面 link 的变化。 link里面的例子是用纯JavaScript脚本写的，我想用在Next Js Framework上开发的Vue项目中。实现一个包含大约 10 个变量的网站，这些变量的值必须通过按下按钮在暗/亮模式下切换来立即更改。

The codepen link that inspired me :)

如何访问和更改 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>

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

Vue JS : How can I access and change Css root variables from vue component to toggle CSS Variables Site Theming?

javascript

css-variables

vue.js

vue-component

nuxt.js