playwriter
Code Issues

add dark mode to website using prefers-color-scheme + .dark class

Browse Source 
Inline script in <head> applies .dark class on <html> 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
This commit is contained in:
Tommy D. Rossi
2026-02-19 18:02:07 +01:00
parent 35c885b199
commit 4dad886f14
4 changed files with 207 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/root.tsx
+10 -1
View File
@@ -11,10 +11,19 @@ import {
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html className="" lang="en">
<html className="" lang="en" suppressHydrationWarning>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{/*
Apply .dark class based on OS prefers-color-scheme.
Inline in <head> to prevent FOUC. Listener handles live OS changes.
*/}
<script
dangerouslySetInnerHTML={{
__html: `(function(){var d=document.documentElement.classList,m=matchMedia('(prefers-color-scheme:dark)');function a(){d.toggle('dark',m.matches)}a();m.addEventListener('change',a)})()`,
}}
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"