robonen
96ac895f7a
Migrate docs to eslint flat config (build-script console override); doc extractor points at configs/eslint.
42 lines
1.9 KiB
Vue
42 lines
1.9 KiB
Vue
<script setup lang="ts">const { preference, cycle } = useTheme();
|
|
|
|
const label = computed(() => ({
|
|
light: 'Light',
|
|
dark: 'Dark',
|
|
system: 'System',
|
|
}[preference.value]));
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
type="button"
|
|
:title="`Theme: ${label} (click to change)`"
|
|
:aria-label="`Theme: ${label}`"
|
|
class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-(--fg-muted) hover:text-(--fg) hover:bg-(--bg-inset) transition-colors cursor-pointer"
|
|
@click="cycle"
|
|
>
|
|
<ClientOnly>
|
|
<!-- Light -->
|
|
<svg v-if="preference === 'light'" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="4" />
|
|
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
|
|
</svg>
|
|
<!-- Dark -->
|
|
<svg v-else-if="preference === 'dark'" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
|
|
</svg>
|
|
<!-- System -->
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="3" width="20" height="14" rx="2" />
|
|
<path d="M8 21h8M12 17v4" />
|
|
</svg>
|
|
<template #fallback>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="3" width="20" height="14" rx="2" />
|
|
<path d="M8 21h8M12 17v4" />
|
|
</svg>
|
|
</template>
|
|
</ClientOnly>
|
|
</button>
|
|
</template>
|