29 lines
771 B
Vue
29 lines
771 B
Vue
<template>
|
|
<div class="card" style="display: flex; gap: 8px; align-items: center;">
|
|
<label>{{ t('theme.label') }}</label>
|
|
<select v-model="current" @change="applyTheme">
|
|
<option value="light">light</option>
|
|
<option value="dark">dark</option>
|
|
<option value="monokai">monokai</option>
|
|
<option value="gruvbox-dark">gruvbox-dark</option>
|
|
</select>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { t } = useI18n()
|
|
|
|
const current = ref('gruvbox-dark')
|
|
|
|
const applyTheme = () => {
|
|
document.documentElement.setAttribute('data-theme', current.value)
|
|
localStorage.setItem('theme', current.value)
|
|
}
|
|
|
|
onMounted(() => {
|
|
const saved = localStorage.getItem('theme') || 'gruvbox-dark'
|
|
current.value = saved
|
|
applyTheme()
|
|
})
|
|
</script>
|