113 lines
2.0 KiB
Vue
113 lines
2.0 KiB
Vue
<template>
|
||
<div
|
||
class="theme-switch"
|
||
:class="{ dark: theme === 'dark' }"
|
||
@click="toggleTheme"
|
||
:title="theme === 'dark' ? '라이트 모드로 전환' : '다크 모드로 전환'"
|
||
>
|
||
<div class="switch-track">
|
||
<span class="switch-icon sun">☀️</span>
|
||
<span class="switch-icon moon">🌙</span>
|
||
</div>
|
||
<div class="switch-thumb"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const { theme, toggleTheme, initTheme } = useTheme()
|
||
|
||
onMounted(() => {
|
||
initTheme()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.theme-switch {
|
||
position: relative;
|
||
width: 56px;
|
||
height: 28px;
|
||
background: #e0e0e0;
|
||
border: 2px solid #ccc;
|
||
border-radius: 14px;
|
||
cursor: pointer;
|
||
transition: background 0.3s ease, border-color 0.3s ease;
|
||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.theme-switch.dark {
|
||
background: #3a3a3a;
|
||
border-color: #666;
|
||
}
|
||
|
||
.switch-track {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 6px;
|
||
}
|
||
|
||
.switch-icon {
|
||
font-size: 14px;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.switch-icon.sun {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.switch-icon.moon {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.theme-switch.dark .switch-icon.sun {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.theme-switch.dark .switch-icon.moon {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.switch-thumb {
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #1a1a1a;
|
||
border-radius: 50%;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
|
||
}
|
||
|
||
.theme-switch.dark .switch-thumb {
|
||
transform: translateX(28px);
|
||
background: #fff;
|
||
}
|
||
|
||
/* 호버 효과 */
|
||
.theme-switch:hover {
|
||
border-color: #999;
|
||
}
|
||
|
||
.theme-switch.dark:hover {
|
||
border-color: #888;
|
||
}
|
||
|
||
.theme-switch:hover .switch-thumb {
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.theme-switch:active .switch-thumb {
|
||
width: 24px;
|
||
}
|
||
|
||
.theme-switch.dark:active .switch-thumb {
|
||
transform: translateX(24px);
|
||
}
|
||
</style>
|