如何在 Vue JS + Tailwind 中使用 localStorage 实现暗模式 CSS

Question

我使用 Vue3 + Tailwind 进行暗模式，但是当我重新加载页面或单击某个重新加载内容的组件时，我的暗模式设置为 false 并且亮模式出现，我不知道如何存储我的数据。这是我的代码：

<div class="relative flex min-h-screen" :class="isDark ? 'dark' : ''">
<button class="px-2 mb-1" @click="isDark = !isDark">
--------------------
<script>
export default {
  setup(){
    let isDark = ref(false)

    return{
      isDark,
    }
  }
}
</script>

obs：我的黑暗模式出现是因为属性 'dark:' 来自 tailwind css 在我的 div's/components.

Answer 1

您使用 localStorage API (documentation)

你的实现看起来像这样

// Click event callback on the dark mode button
toggleDarkMode(){
    this.isDark = !this.isDark;
    localStorage.setItem('darkMode', this.isDark);
}

// Your setup() function
setup(){
    let isDark = localStorage.getItem('darkMode') == 'true'

    return{
      isDark,
    }
}

注意：本地存储仅存储字符串，因此您的布尔值不会是布尔类型，因此将其作为字符串版本进行比较。有人可能有办法将它再次变成布尔值，但这对我的项目来说效果很好。

Answer 2

阅读 Josh 的回答我只是编辑了一些东西，比如变量的局部变量，例如 Vue 中的一个变量变量应该在 data() 中。这就是代码：

// The button
<button class="px-2 mb-1" @click="toggleDarkMode">

// Click event callback on the dark mode button
methods:{
toggleDarkMode(){
    this.isDark = !this.isDark;
    localStorage.setItem('darkMode', this.isDark);
 }
}

// Your data() function
data(){
    let isDark = localStorage.getItem('darkMode') == 'true'

    return{
      isDark,
    }
}

如何在 Vue JS + Tailwind 中使用 localStorage 实现暗模式 CSS

How to do a dark mode with localStorage in Vue JS + Tailwind CSS

vue.js

vue-component

tailwind-css

vuejs3

darkmode