95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import Dashboard from './views/Dashboard.vue'
|
||
import '@ztimson/css-utils/dist/css-utils.min.css';
|
||
|
||
const dark = ref(window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||
|
||
function toggleDark() { dark.value = !dark.value }
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
::-webkit-scrollbar {
|
||
width: .45rem;
|
||
height: .45rem;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
--tw-border-opacity: 1;
|
||
border-color: rgba(255, 255, 255, var(--tw-border-opacity));
|
||
background-color: #d7d7d799;
|
||
border-width: 1px;
|
||
border-radius: 9999px;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background-color: #0000;
|
||
border-radius: 9999px;
|
||
}
|
||
|
||
:root {
|
||
--bg: #ffffff;
|
||
--surface: #d0dae1;
|
||
--border: #e2e8f0;
|
||
--text: #0f172a;
|
||
--text-muted: #64748b;
|
||
--hover: #f1f5f9;
|
||
--accent: #3b82f6;
|
||
}
|
||
|
||
.dark {
|
||
--bg: #0a0a0a;
|
||
--surface: #111111;
|
||
--border: #222222;
|
||
--text: #f1f5f9;
|
||
--text-muted: #64748b;
|
||
--hover: #1a1a1a;
|
||
--accent: #3b82f6;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
|
||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||
</style>
|
||
|
||
<style scoped lang="scss">
|
||
.app-wrap {
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.theme-toggle {
|
||
position: fixed;
|
||
top: 16px;
|
||
right: 16px;
|
||
z-index: 500;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 99px;
|
||
padding: 6px 12px;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
color: var(--text);
|
||
transition: background 0.15s;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||
|
||
&:hover { background: var(--hover); }
|
||
}
|
||
</style>
|
||
|
||
<template>
|
||
<div class="app-wrap" :class="{ dark }">
|
||
<button class="theme-toggle" @click="toggleDark">
|
||
{{ dark ? '☀️' : '🌙' }}
|
||
</button>
|
||
<Dashboard :dark="dark" />
|
||
</div>
|
||
</template>
|