Vue + SCSS + CSS + root + data – the theme in the skin

    <template>
  <div id="theme" :class="$style.bg">
    <span :class="$style.textColor" @click="ClickChangeTheme()">text</span>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class Home extends Vue {
  mounted() {
    window.document.documentElement.setAttribute( "data-theme", 'dark');
  }
  ClickChangeTheme() {
    const currentTheme = window.document.documentElement.getAttribute("data-theme");
    if(currentTheme === "dark") {
      window.document.documentElement.setAttribute( "data-theme", 'light');
    } else {
      window.document.documentElement.setAttribute( "data-theme", 'dark');
    }
  }
}
</script>
<style module lang="scss">
$white: #ffffff;
$black: #000000;
:root[data-theme="dark"] {
  --text-color: $white;
  --bg-color: $black;
}
:root[data-theme="light"] {
  --text-color:$black;
  --bg-color: $white;
}
.textColor {
  color: var(--text-color);
}
.bg {
  background-color: var(--bg-color);
}
</style>
Copy the code