From 4dad886f146c8faeb8b1de93ad4acdb8959aeabd Mon Sep 17 00:00:00 2001 From: "Tommy D. Rossi" Date: Thu, 19 Feb 2026 18:02:07 +0100 Subject: [PATCH] add dark mode to website using prefers-color-scheme + .dark class Inline script in applies .dark class on based on OS preference and listens for live changes. All liveline page colors now use CSS variables with dark overrides in .dark .liveline-page block. - liveline.css: new vars (--ll-text-muted, --ll-text-hover, --ll-divider, --ll-code-line-nr, --ll-btn-bg/shadow, --ll-fade-*) + full dark overrides - liveline-prism.css: GitHub Dark syntax highlighting theme under .dark - liveline.tsx: ~30 hardcoded rgba/hex colors replaced with CSS vars - root.tsx: anti-FOUC script toggling .dark from prefers-color-scheme --- website/src/root.tsx | 11 ++- website/src/routes/liveline.tsx | 41 +++++------ website/src/styles/liveline-prism.css | 91 +++++++++++++++++++++++++ website/src/styles/liveline.css | 98 +++++++++++++++++++++++---- 4 files changed, 207 insertions(+), 34 deletions(-) diff --git a/website/src/root.tsx b/website/src/root.tsx index 9943cb3..9c87729 100644 --- a/website/src/root.tsx +++ b/website/src/root.tsx @@ -11,10 +11,19 @@ import { export function Layout({ children }: { children: React.ReactNode }) { return ( - + + {/* + Apply .dark class based on OS prefers-color-scheme. + Inline in to prevent FOUC. Listener handles live OS changes. + */} +