使用变量 SASS 在 VueJs 中实现暗模式的正确方法是什么

Question

如果我使用 sass 和 VueJS
，暗模式切换功能的最佳实现是什么我有一个带有 sass 个颜色变量的项目。

/* variables */
/* ------------- */
$bg-main: #f8f8f8;
$btn-secondary-c: #f6f6f6;
$bg-items: #fff;
$text-c-1: #625f6e;
$text-c-2: #5e5873;
$color-main: #6e6b7b;
$shadow-c: rgba(34, 41, 47, 0.05);
/* ------- */

并且它有自己的文件并且全局作用于我的 vue 应用程序

src
--components
--assets
----_variables.scss

我的 Vue 组件是以 SFC（单文件组件）样式创建的，就像这样

<template>
  <main>
    <div class="content-wrapper">
      <ProductsSection/>
    </div>
  </main>
</template>

<script>
import ProductsSection from "./ProductsSection.vue"
  export default {
    name: 'MainSection',
    components: {
      ProductsSection,
    },
  }
</script>

<style lang="scss" scoped>
.content-wrapper{
  background-color: $bg-main;
}
</style>

我的问题是这种情况的最佳实施方式是什么？

Answer 1

我很喜欢修改html属性：

// index.html
<html lang="en" data-theme="dark">
...
</html>

// App.vue
<template>
<button @click="changeTheme('light')">light theme</button>
<button @click="changeTheme('dark')">dark theme</button>
</template>

<script>
methods: {
  changeTheme(newTheme) {
     document.documentElement.setAttribute('data-theme', newTheme)
  }
}
</script>

<style lang="scss">
@import "./assets/style.scss";
</style>

// style.scss
[data-theme="dark"] {
  --bg-color1: #121416;
  --font-color: #f4f4f4;
}
[data-theme="light"] {
  --bg-color1: #f4f4f4;
  --font-color: #121416;
}
...
body {
  background-color: var(--bg-color1);
  color: var(--font-color);
}

我希望你明白了

使用变量 SASS 在 VueJs 中实现暗模式的正确方法是什么

what's the proper way to implement darkmode in VueJs with SASS using variables

javascript

css

vue.js

sass

darkmode