在nuxt.js上添加暗模式切换以验证app v2.0

<template>
  <div>
    <label for="dark-mode-toggle">暗模式</label>
    <input id="dark-mode-toggle" type="checkbox" v-model="darkMode" @change="toggleDarkMode">
  </div>
</template>

<script>
export default {
  data() {
    return {
      darkMode: false
    };
  },
  methods: {
    toggleDarkMode() {
      // 在这里可以添加切换暗模式的逻辑
      // 可以使用localStorage或者cookie来保存用户的选择
      // 并在页面加载时根据用户的选择来设置暗模式
    }
  }
};
</script>

<template>
  <div>
    <h1>首页</h1>
    <DarkModeToggle />
    <!-- 其他页面内容 -->
  </div>
</template>

<script>
import DarkModeToggle from '@/components/DarkModeToggle.vue';

export default {
  components: {
    DarkModeToggle
  },
  // 其他页面逻辑
};
</script>

toggleDarkMode() {
  if (this.darkMode) {
    // 切换到暗模式
    document.documentElement.classList.add('dark-mode');
  } else {
    // 切换到亮模式
    document.documentElement.classList.remove('dark-mode');
  }
}

/* 亮模式样式 */
body {
  background-color: #ffffff;
  color: #000000;
}

/* 暗模式样式 */
.dark-mode body {
  background-color: #000000;
  color: #ffffff;
}