josedario87
7cb35b8c27
- Replace emoji icons with professional SVG icons from Lucide Vue - Add collapsible MusicControls with compact top-right collapse button - Improve icon system with dynamic sizing and proper prop handling - Disable SSR to prevent hydration issues with audio APIs - Update IconButton to support both emoji strings and SVG components - Optimize bottom positioning for expanded vs collapsed states - Document new icon system in DESIGN_SYSTEM.md
59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<template>
|
|
<IconButton
|
|
:icon="isDark ? Sun : Moon"
|
|
:title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
|
|
@click="toggleTheme"
|
|
class="theme-toggle"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useLocalStorage } from '@vueuse/core'
|
|
import { watch } from 'vue'
|
|
import { Sun, Moon } from 'lucide-vue-next'
|
|
import IconButton from './IconButton.client.vue'
|
|
|
|
const isDark = useLocalStorage('theme-dark', false)
|
|
|
|
const toggleTheme = () => {
|
|
isDark.value = !isDark.value
|
|
}
|
|
|
|
// Apply theme change to document
|
|
watch(isDark, (newValue) => {
|
|
if (process.client) {
|
|
document.documentElement.setAttribute('data-theme', newValue ? 'dark' : 'light')
|
|
}
|
|
}, { immediate: true })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.theme-toggle {
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
transform: scale(1.1) rotate(180deg);
|
|
}
|
|
|
|
/* Special glow effect for theme toggle */
|
|
.theme-toggle::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: all 0.3s ease;
|
|
z-index: -1;
|
|
}
|
|
|
|
.theme-toggle:hover::after {
|
|
width: 80px;
|
|
height: 80px;
|
|
opacity: 0.3;
|
|
}
|
|
</style> |