73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
<template>
|
||
<div class="theme-toggle">
|
||
<button @click="toggleTheme" class="theme-button" :title="buttonTitle">
|
||
<span v-if="currentTheme === 'light'" class="theme-icon">🌙</span>
|
||
<span v-else class="theme-icon">☀️</span>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'ThemeToggle',
|
||
data() {
|
||
return {
|
||
currentTheme: 'light'
|
||
}
|
||
},
|
||
computed: {
|
||
buttonTitle() {
|
||
return this.currentTheme === 'light'
|
||
? 'Passer au mode sombre'
|
||
: 'Passer au mode clair'
|
||
}
|
||
},
|
||
methods: {
|
||
toggleTheme() {
|
||
this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light'
|
||
document.documentElement.setAttribute('data-theme', this.currentTheme)
|
||
localStorage.setItem('theme', this.currentTheme)
|
||
}
|
||
},
|
||
mounted() {
|
||
// Récupérer le thème actuel
|
||
const theme = document.documentElement.getAttribute('data-theme') || 'light'
|
||
this.currentTheme = theme
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.theme-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.theme-button {
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 1.2rem;
|
||
padding: 0.5rem;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.theme-button:hover {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.theme-icon {
|
||
line-height: 1;
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.theme-button {
|
||
font-size: 1rem;
|
||
padding: 0.3rem;
|
||
}
|
||
}
|
||
</style>
|