Jennie Robinson Faber
f16f9ada64
Wrap auth-dependent sidebar navigation and meta in ClientOnly with SSR fallback slots to prevent hydration mismatch that caused all authenticated nav links to point to wrong pages. Fix admin events page crash by replacing empty string USelect values with 'all'.
63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<template>
|
|
<div class="color-mode-toggle">
|
|
<button
|
|
v-for="option in options"
|
|
:key="option.value"
|
|
:class="{ active: colorMode.preference === option.value }"
|
|
@click="colorMode.preference = option.value"
|
|
>{{ option.label }}</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const colorMode = useColorMode()
|
|
|
|
const options = [
|
|
{ label: 'Light', value: 'light' },
|
|
{ label: 'System', value: 'system' },
|
|
{ label: 'Dark', value: 'dark' },
|
|
]
|
|
</script>
|
|
|
|
<style scoped>
|
|
.color-mode-toggle {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.color-mode-toggle button {
|
|
flex: 1;
|
|
padding: 4px 0;
|
|
font-family: 'Commit Mono', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.04em;
|
|
background: transparent;
|
|
color: var(--text-faint);
|
|
border: 1px dashed var(--border);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.color-mode-toggle button + button {
|
|
border-left: none;
|
|
}
|
|
|
|
.color-mode-toggle button:hover {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.color-mode-toggle button.active {
|
|
color: var(--candle);
|
|
border-color: var(--candle);
|
|
border-style: solid;
|
|
background: var(--surface);
|
|
}
|
|
|
|
/* When active button is adjacent to dashed, restore left border */
|
|
.color-mode-toggle button.active + button {
|
|
border-left: 1px dashed var(--border);
|
|
}
|
|
.color-mode-toggle button:has(+ button.active) {
|
|
border-right: none;
|
|
}
|
|
</style>
|