data classes aren't working in vue3 + daisyUI

[xrayian]

What I tried

While testing it did work once and I saw the local storage write the changed theme value, but after a cache clear it didn't work at all. I am using vue 3 composition api. I might be able to get it to work manually setting local storage values but I wanted to understand. why this isn't working.

What isn't working

Selecting from the dropdown isn't doing anything. Also typescript is throwing errors for the missing type declarations

Some relevant code

you can see the full project here my navbar.vue

<script setup lang="ts">
import { computed, onMounted } from 'vue';
//...
import { themeChange } from 'theme-change';

//...

onMounted(() => {
    themeChange(false)
})

</script>

<template>
// nav component classes ...
  <li tabindex="0">
      <a>
          🎨 Theme
          <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
              viewBox="0 0 24 24">
              <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
          </svg>
      </a>
      <ul class="p-2 bg-base-100" data-choose-theme>
          <li>
              <a data-set-theme="dracula" data-act-class="outline">Dracula</a>
          </li>
          <li>
              <a data-set-theme="emerald" data-act-class="outline">Emerald</a>
          </li>
          <li>
              <a data-set-theme="garden" data-act-class="outline">Garden</a>
          </li>
          <li>
              <a data-set-theme="light" data-act-class="outline">Light</a>
          </li>
          <li>
              <a data-set-theme="dark" data-act-class="outline">Dark</a>
          </li>
      </ul>
</li>
// ...
</template>

[Cardroid]

I had symptoms similar to this. Guess, it is related to the call condition of the function onMounted().

[xrayian]

@Cardroid can you describe how you fixed the issue?

[Cardroid]

I made a compromise. I put the navigation bar in the root component App.vue, where I used theme-change. I hope it helps.

[pheng0077]

I have the same issues. I don't think using theme-change in the App.vue is a good choice. Although, I have multiple layouts in the app, so using this method is really hard to manage my app. I am still looking for a solution for this too.

[xrayian]

I have the same issues. I don't think using theme-change in the App.vue is a good choice. Although, I have multiple layouts in the app, so using this method is really hard to manage my app. I am still looking for a solution for this too.

let me know if u figure something out.

[pheng0077]

I have the same issues. I don't think using theme-change in the App.vue is a good choice. Although, I have multiple layouts in the app, so using this method is really hard to manage my app. I am still looking for a solution for this too.

let me know if u figure something out.

I got a solution here: App.vue

onMounted(() => {
  const theme = localStorage.getItem("theme");
  if (theme) {
    document.documentElement.setAttribute("data-theme", theme);
  }
});

this function is to prevent calling the default theme when reloading the page.

Create a component: something.vue

<script setup lang="ts">
import { themeChange } from "theme-change";
import { onMounted } from "vue";

onMounted(() => {
  themeChange(false);
});
</script>
<template>
  <div>
    <button data-set-theme="dark" data-act-class="dark">
      <i-material-symbols-brightness-3 class="text-base-100" />
    </button>
    <button data-set-theme="light" data-act-class="light">
      <i-jam-brightness-down-f class="text-base-100" />
    </button>
  </div>
</template>

<style scoped>
.light,
.dark {
  display: none;
}
</style>

Then call this component anywhere you want to make it your theme mode.

This is just unplugin-icon <i-material-symbols-brightness-3 class="text-base-100" />

I hope this will help.