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

Question

I do a dark mode using Vue3 + Tailwind but when I reload the page or click in some component that reload something my dark mode set's to false and the light mode appears, I don't know how I can storage my data. Here's my code:

<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: my dark mode appears because the property 'dark:' from tailwind css in my div's/components.

Answer 1

Reading the Josh answer I just edit some things like the local of the variable, for instance one variable in Vue the variable should be in data(). Soo that's the code:

// 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,
    }
}