ua1zbe/meshcore-sar_android
1
0
Fork 0
mirror of https://github.com/dz0ny/meshcore-sar.git synced 2026-08-11 16:30:28 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

feat: Add dark theme charts ref:

Browse Source
This commit is contained in:
Janez T
2026-04-03 22:38:21 +02:00
parent d2fee94678
commit d66bbca82c
8 changed files with 73 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
worker/src/components/dashboard/dashboard-shell.tsx
View File

@@ -504,12 +504,12 @@ function CompositionChart({ points }: { points: CompositionPoint[] }) {
>
<defs>
<linearGradient id="humanFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="hsl(217, 91%, 60%)" stopOpacity={0.5} />
<stop offset="100%" stopColor="hsl(217, 91%, 60%)" stopOpacity={0.1} />
<stop offset="0%" stopColor="hsl(var(--chart-primary))" stopOpacity={0.5} />
<stop offset="100%" stopColor="hsl(var(--chart-primary))" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="overheadFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="hsl(206, 22%, 75%)" stopOpacity={0.5} />
<stop offset="100%" stopColor="hsl(206, 22%, 75%)" stopOpacity={0.1} />
<stop offset="0%" stopColor="hsl(var(--chart-secondary))" stopOpacity={0.5} />
<stop offset="100%" stopColor="hsl(var(--chart-secondary))" stopOpacity={0.1} />
</linearGradient>
</defs>
@@ -517,21 +517,21 @@ function CompositionChart({ points }: { points: CompositionPoint[] }) {
const y = (1 - val / maxVal) * innerH;
return (
<g key={val}>
<line x1={0} y1={y} x2={innerW} y2={y} stroke="hsl(206, 22%, 87%)" strokeWidth={0.3} />
<text x={-6} y={y} textAnchor="end" dominantBaseline="middle" fill="hsl(208, 19%, 55%)" fontSize={3.2} fontFamily="var(--font-sans)">
<line x1={0} y1={y} x2={innerW} y2={y} stroke="hsl(var(--chart-grid))" strokeWidth={0.3} />
<text x={-6} y={y} textAnchor="end" dominantBaseline="middle" fill="hsl(var(--chart-label))" fontSize={3.2} fontFamily="var(--font-sans)">
{formatCompact(val)}
</text>
</g>
);
})}
<line x1={0} y1={innerH} x2={innerW} y2={innerH} stroke="hsl(206, 22%, 87%)" strokeWidth={0.4} />
<line x1={0} y1={innerH} x2={innerW} y2={innerH} stroke="hsl(var(--chart-grid))" strokeWidth={0.4} />
<path d={overheadArea} fill="url(#overheadFill)" />
<path d={humanArea} fill="url(#humanFill)" />
{/* X labels */}
{points.map((p, i) => (i % labelStep === 0 || i === count - 1) ? (
<text key={i} x={xs[i] * innerW} y={innerH + 10} textAnchor="middle" fill="hsl(208, 19%, 55%)" fontSize={2.8} fontFamily="var(--font-sans)">
<text key={i} x={xs[i] * innerW} y={innerH + 10} textAnchor="middle" fill="hsl(var(--chart-label))" fontSize={2.8} fontFamily="var(--font-sans)">
{p.label.slice(5)}
</text>
) : null)}
@@ -550,7 +550,7 @@ function CompositionChart({ points }: { points: CompositionPoint[] }) {
))}
{hover !== null && (
<line x1={xs[hover] * innerW} y1={0} x2={xs[hover] * innerW} y2={innerH} stroke="hsl(217, 91%, 60%)" strokeWidth={0.3} strokeDasharray="1.5 1" />
<line x1={xs[hover] * innerW} y1={0} x2={xs[hover] * innerW} y2={innerH} stroke="hsl(var(--chart-primary))" strokeWidth={0.3} strokeDasharray="1.5 1" />
)}
</svg>
@@ -630,12 +630,12 @@ function TrafficChart({ points, maxValue: _rawMax }: { points: ChartPoint[]; max
>
<defs>
<linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="hsl(217, 91%, 60%)" stopOpacity={0.35} />
<stop offset="100%" stopColor="hsl(217, 91%, 60%)" stopOpacity={0.03} />
<stop offset="0%" stopColor="hsl(var(--chart-primary))" stopOpacity={0.35} />
<stop offset="100%" stopColor="hsl(var(--chart-primary))" stopOpacity={0.03} />
</linearGradient>
<linearGradient id="lineStroke" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stopColor="hsl(217, 91%, 65%)" />
<stop offset="100%" stopColor="hsl(217, 70%, 50%)" />
<stop offset="0%" stopColor="hsl(var(--chart-primary-light))" />
<stop offset="100%" stopColor="hsl(var(--chart-primary-dark))" />
</linearGradient>
</defs>
@@ -644,8 +644,8 @@ function TrafficChart({ points, maxValue: _rawMax }: { points: ChartPoint[]; max
const y = (1 - val / maxValue) * innerH;
return (
<g key={val}>
<line x1={0} y1={y} x2={innerW} y2={y} stroke="hsl(206, 22%, 87%)" strokeWidth={0.3} />
<text x={-6} y={y} textAnchor="end" dominantBaseline="middle" fill="hsl(208, 19%, 55%)" fontSize={3.2} fontFamily="var(--font-sans)">
<line x1={0} y1={y} x2={innerW} y2={y} stroke="hsl(var(--chart-grid))" strokeWidth={0.3} />
<text x={-6} y={y} textAnchor="end" dominantBaseline="middle" fill="hsl(var(--chart-label))" fontSize={3.2} fontFamily="var(--font-sans)">
{formatCompact(val)}
</text>
</g>
@@ -653,7 +653,7 @@ function TrafficChart({ points, maxValue: _rawMax }: { points: ChartPoint[]; max
})}
{/* baseline */}
<line x1={0} y1={innerH} x2={innerW} y2={innerH} stroke="hsl(206, 22%, 87%)" strokeWidth={0.4} />
<line x1={0} y1={innerH} x2={innerW} y2={innerH} stroke="hsl(var(--chart-grid))" strokeWidth={0.4} />
{/* area fill */}
<path d={areaPath} fill="url(#areaFill)" />
@@ -666,7 +666,7 @@ function TrafficChart({ points, maxValue: _rawMax }: { points: ChartPoint[]; max
cx={xs[peakIdx] * innerW}
cy={ys[peakIdx] * innerH}
r={1.5}
fill="hsl(217, 91%, 60%)"
fill="hsl(var(--chart-primary))"
stroke="white"
strokeWidth={0.6}
/>
@@ -676,7 +676,7 @@ function TrafficChart({ points, maxValue: _rawMax }: { points: ChartPoint[]; max
x={xs[peakIdx] * innerW}
y={ys[peakIdx] * innerH - 4}
textAnchor="middle"
fill="hsl(217, 91%, 45%)"
fill="hsl(var(--chart-primary-accent))"
fontSize={3}
fontWeight={600}
fontFamily="var(--font-sans)"
@@ -691,7 +691,7 @@ function TrafficChart({ points, maxValue: _rawMax }: { points: ChartPoint[]; max
x={xs[i] * innerW}
y={innerH + 10}
textAnchor="middle"
fill="hsl(208, 19%, 55%)"
fill="hsl(var(--chart-label))"
fontSize={2.8}
fontFamily="var(--font-sans)"
>
@@ -723,7 +723,7 @@ function TrafficChart({ points, maxValue: _rawMax }: { points: ChartPoint[]; max
y1={0}
x2={xs[hover] * innerW}
y2={innerH}
stroke="hsl(217, 91%, 60%)"
stroke="hsl(var(--chart-primary))"
strokeWidth={0.3}
strokeDasharray="1.5 1"
/>
@@ -732,7 +732,7 @@ function TrafficChart({ points, maxValue: _rawMax }: { points: ChartPoint[]; max
cy={ys[hover] * innerH}
r={1.2}
fill="white"
stroke="hsl(217, 91%, 60%)"
stroke="hsl(var(--chart-primary))"
strokeWidth={0.6}
/>
</>

2
worker/src/components/ui/badge.tsx
View File

@@ -11,7 +11,7 @@ const badgeVariants = cva(
default: "border-transparent bg-primary text-primary-foreground",
secondary: "border-transparent bg-secondary text-secondary-foreground",
destructive: "border-transparent bg-destructive text-destructive-foreground",
outline: "text-foreground bg-white/60",
outline: "text-foreground bg-card/60",
},
},
defaultVariants: {

2
worker/src/components/ui/card.tsx
View File

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card"
className={cn(
"bg-card/88 text-card-foreground flex flex-col gap-6 rounded-[1.5rem] border border-white/70 py-6 shadow-[0_18px_48px_rgba(16,33,47,0.08)] backdrop-blur-md",
"bg-card/88 text-card-foreground flex flex-col gap-6 rounded-[1.5rem] border border-border/50 py-6 shadow-[0_18px_48px_rgba(16,33,47,0.08)] dark:shadow-[0_18px_48px_rgba(0,0,0,0.3)] backdrop-blur-md",
className,
)}
{...props}

40
worker/src/index.css
View File

@@ -46,6 +46,40 @@
--input: 220 20% 88%;
--ring: 217 91% 60%;
--radius: 1rem;
--chart-grid: 220 20% 88%;
--chart-label: 220 13% 46%;
--chart-primary: 217 91% 60%;
--chart-primary-light: 217 91% 65%;
--chart-primary-dark: 217 70% 50%;
--chart-primary-accent: 217 91% 45%;
--chart-secondary: 206 22% 75%;
}
.dark {
--background: 222 47% 8%;
--foreground: 220 20% 90%;
--card: 222 40% 12%;
--card-foreground: 220 20% 90%;
--primary: 217 91% 60%;
--primary-foreground: 0 0% 100%;
--secondary: 220 30% 18%;
--secondary-foreground: 220 20% 90%;
--muted: 220 20% 16%;
--muted-foreground: 220 13% 55%;
--accent: 217 91% 60%;
--accent-foreground: 0 0% 100%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 220 20% 20%;
--input: 220 20% 20%;
--ring: 217 91% 60%;
--chart-grid: 220 20% 22%;
--chart-label: 220 13% 50%;
--chart-primary: 217 91% 65%;
--chart-primary-light: 217 91% 70%;
--chart-primary-dark: 217 70% 55%;
--chart-primary-accent: 217 91% 55%;
--chart-secondary: 220 20% 35%;
}
* {
@@ -54,14 +88,12 @@
html {
font-family: var(--font-sans);
color-scheme: light dark;
}
body {
min-height: 100vh;
background:
radial-gradient(circle at top left, hsl(217 91% 60% / 0.10), transparent 30%),
radial-gradient(circle at top right, hsl(217 70% 50% / 0.08), transparent 24%),
linear-gradient(180deg, #f5f8fc 0%, hsl(var(--background)) 100%);
background: hsl(var(--background));
color: hsl(var(--foreground));
}
}

6
worker/src/layouts/BaseLayout.astro
View File

@@ -18,5 +18,11 @@ import "../index.css";
</head>
<body>
<slot />
<script>
const mq = window.matchMedia("(prefers-color-scheme: dark)");
function apply(e) { document.documentElement.classList.toggle("dark", e.matches); }
apply(mq);
mq.addEventListener("change", apply);
</script>
</body>
</html>