如何在Vue JS和尾风CSS中切换到暗模式

Question

我想切换到黑暗模式在Vue JS和尾风CSS与黑暗类在顺风，但我不知道我应该做什么。我编写了一些代码，我想尝试使用v，比如v-if ="isDark === true"类(尾风)活动的黑暗模式，比如<div class="flex justify-center mt-4 bg-white dark:bg-black">。

Obs:我在tailwind.config.js中用darkMode激活暗模式：“类”

下面是我的代码：

<button href="" class="px-2 mb-1" @click="isDark = !isDark">
  <img src="../Assets/Icons/moon.svg" alt="" class="w-6 h-5 hidden lg:flex md:flex" v-if="isDark === true">
  <img src="../Assets/Icons/sun.svg" alt="" class="w-6 h-5 hidden lg:flex md:flex" v-if="isDark === false">
</button>

<script>
export default {
  setup(){
    const showSidebar = ref(false)
    const stayInDropdown = ref(true)
    const isDark = ref(true)
    return{
      showSidebar,
      stayInDropdown,
      isDark,
    }
  },
</script>

Answer 1

我刚在我的div中添加了:class="isDark ? 'dark' : ''"，它包含了我所有的代码和工作！

Answer 2

尝试查看isDark属性，并从body元素中添加/删除dark类：

<script>
export default {
  setup(){
    const showSidebar = ref(false)
    const stayInDropdown = ref(true)
    const isDark = ref(true)

     watch(isDark,(val)=>{
     
      val?document.body.classList.add("dark"): document.body.classList.remove("dark")
   })

    return{
      showSidebar,
      stayInDropdown,
      isDark,
    }
  },
</script>