root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Enhanced UI

Browse Source
This commit is contained in:
root
2025-11-23 01:16:58 +01:00
parent f8b4e98f9c
commit 56858701ef
5 changed files with 468 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/utilities/DarkModeToggle.vue
View File

@@ -1,6 +1,14 @@
<template>
<button @click="settingsStore.toggleDarkMode()" class="p-2 rounded-lg transition-colors" :class="settingsStore.darkMode ? 'text-yellow-400 hover:bg-gray-700' : 'text-gray-700 hover:bg-gray-100'" aria-label="Toggle dark mode" data-rybbit-event="toggle-dark-mode">
<i :class="settingsStore.darkMode ? 'fas fa-sun' : 'fas fa-moon'"></i>
<button
@click="settingsStore.toggleDarkMode()"
class="relative p-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl group"
:class="settingsStore.darkMode ? 'bg-gradient-to-br from-indigo-600 to-purple-700 text-yellow-300' : 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white'"
aria-label="Toggle dark mode"
data-rybbit-event="toggle-dark-mode"
>
<div class="relative w-6 h-6 flex items-center justify-center">
<i :class="settingsStore.darkMode ? 'fas fa-sun' : 'fas fa-moon'" class="text-xl transition-all duration-300 group-hover:scale-110"></i>
</div>
</button>
</template>