frontend/src/components/BotaoAlterarTema.vue

<script setup>
import { useTheme } from "../composables/useTheme.js";

const { darkMode } = useTheme();
</script>

<template>
  <button
    type="button"
    class="inline-flex items-center justify-center rounded-md !p-2 !bg-none !bg-transparent !border-0 !text-current hover:!bg-black/10 dark:hover:!bg-white/10 motion-safe:transition-colors"
    aria-label="Alternar tema"
    @click="darkMode = !darkMode"
  >
    <Transition name="tema-icon" mode="out-in">
      <svg v-if="darkMode" key="sun" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
        />
      </svg>
      <svg v-else key="moon" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M21.752 15.002A9.718 9.718 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
        />
      </svg>
    </Transition>
  </button>
</template>

<style scoped>
.tema-icon-enter-active,
.tema-icon-leave-active {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tema-icon-enter-from {
  opacity: 0;
  transform: rotate(-90deg) scale(0.7);
}
.tema-icon-leave-to {
  opacity: 0;
  transform: rotate(90deg) scale(0.7);
}
</style>