pyr0ball
58b179b275
- theme.css: CSS custom properties for both modes (surface, accent, text, sev, badge); .dark class override; smooth 0.15s transitions - uno.config.ts: colors now reference var() — all semantic classes auto-switch with the .dark class; dark: 'class' strategy enabled - main.ts: apply saved preference (localStorage ts-theme) or prefers-color-scheme before first paint to prevent flash - App.vue: ☾/☀ toggle button persists choice to localStorage - IncidentsView: severityStyle() uses badge CSS variables via inline style — fixes /opacity modifier incompatibility with CSS vars
52 lines
1.8 KiB
Vue
52 lines
1.8 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-surface font-mono text-text-primary">
|
|
<nav class="border-b border-surface-border px-6 py-3 flex items-center gap-6">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-accent font-semibold tracking-wide">TURNSTONE</span>
|
|
<span class="text-text-dim text-xs">diagnostic intelligence</span>
|
|
</div>
|
|
<div class="flex gap-1 ml-4">
|
|
<RouterLink
|
|
v-for="link in navLinks"
|
|
:key="link.to"
|
|
:to="link.to"
|
|
class="px-3 py-1 rounded text-sm text-text-muted hover:text-text-primary hover:bg-surface-raised transition-colors"
|
|
active-class="text-accent bg-accent-muted"
|
|
>
|
|
{{ link.label }}
|
|
</RouterLink>
|
|
</div>
|
|
<div class="ml-auto flex items-center gap-3">
|
|
<button
|
|
@click="toggleTheme"
|
|
:title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
|
|
class="text-text-dim hover:text-text-primary transition-colors text-base leading-none px-1"
|
|
aria-label="Toggle theme"
|
|
>{{ isDark ? '☀' : '☾' }}</button>
|
|
<StatusDot />
|
|
</div>
|
|
</nav>
|
|
<RouterView />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { RouterLink, RouterView } from 'vue-router'
|
|
import StatusDot from '@/components/StatusDot.vue'
|
|
|
|
const navLinks = [
|
|
{ to: '/search', label: 'Search' },
|
|
{ to: '/diagnose', label: 'Diagnose' },
|
|
{ to: '/incidents', label: 'Incidents' },
|
|
{ to: '/sources', label: 'Sources' },
|
|
]
|
|
|
|
const isDark = ref(document.documentElement.classList.contains('dark'))
|
|
|
|
function toggleTheme() {
|
|
isDark.value = !isDark.value
|
|
document.documentElement.classList.toggle('dark', isDark.value)
|
|
localStorage.setItem('ts-theme', isDark.value ? 'dark' : 'light')
|
|
}
|
|
</script>
|