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"
website/src/routes/liveline.tsx
+21 -20
View File
@@ -15,6 +15,7 @@ import "prismjs/components/prism-bash";
import "website/src/styles/liveline.css";
import "website/src/styles/liveline-prism.css";
/* =========================================================================
TOC sidebar (fixed left)
========================================================================= */
@@ -109,15 +110,15 @@ function TableOfContents() {
lineHeight: "20px",
letterSpacing: "-0.09px",
padding: "4px 0",
color: "rgba(0, 0, 0, 0.4)",
color: "var(--ll-text-secondary)",
fontFamily: "var(--ll-font-primary)",
marginBottom: "8px",
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = "rgba(0, 0, 0, 0.7)";
e.currentTarget.style.color = "var(--ll-text-hover)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = "rgba(0, 0, 0, 0.4)";
e.currentTarget.style.color = "var(--ll-text-secondary)";
}}
>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
@@ -133,7 +134,7 @@ function TableOfContents() {
</a>
{tocItems.map((item) => {
const isActive = `#${activeId}` === item.href;
const defaultColor = isActive ? "rgba(0, 0, 0, 0.9)" : "rgba(0, 0, 0, 0.4)";
const defaultColor = isActive ? "var(--ll-text-primary)" : "var(--ll-text-secondary)";
return (
<a
key={item.href}
@@ -151,7 +152,7 @@ function TableOfContents() {
}}
onMouseEnter={(e) => {
if (!isActive) {
e.currentTarget.style.color = "rgba(0, 0, 0, 0.7)";
e.currentTarget.style.color = "var(--ll-text-hover)";
}
}}
onMouseLeave={(e) => {
@@ -175,19 +176,19 @@ function BackButton() {
return (
<a
href="/"
className="fixed top-5 right-5 z-[100000] flex items-center justify-center w-10 h-10 rounded-full bg-white no-underline"
className="fixed top-5 right-5 z-[100000] flex items-center justify-center w-10 h-10 rounded-full no-underline"
style={{
color: "rgba(0, 0, 0, 0.4)",
boxShadow:
"rgba(0, 0, 0, 0.08) 0px 2px 8px, rgba(0, 0, 0, 0.04) 0px 4px 16px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px inset",
background: "var(--ll-btn-bg)",
color: "var(--ll-text-secondary)",
boxShadow: "var(--ll-btn-shadow)",
transition: "color 0.15s, transform 0.15s",
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = "rgba(0, 0, 0, 0.7)";
e.currentTarget.style.color = "var(--ll-text-hover)";
e.currentTarget.style.transform = "scale(1.05)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = "rgba(0, 0, 0, 0.4)";
e.currentTarget.style.color = "var(--ll-text-secondary)";
e.currentTarget.style.transform = "scale(1)";
}}
onMouseDown={(e) => {
@@ -264,7 +265,7 @@ function Caption({ children }: { children: React.ReactNode }) {
fontWeight: 475,
lineHeight: "20px",
letterSpacing: "-0.09px",
color: "rgba(0, 0, 0, 0.4)",
color: "var(--ll-text-secondary)",
margin: 0,
}}
>
@@ -278,7 +279,7 @@ function Divider() {
<div
style={{
height: "1px",
background: "rgb(242, 242, 242)",
background: "var(--ll-divider)",
margin: 0,
}}
/>
@@ -358,7 +359,7 @@ function CodeBlock({ children, lang = "jsx" }: { children: string; lang?: string
className="select-none shrink-0"
aria-hidden="true"
style={{
color: "rgba(0, 0, 0, 0.15)",
color: "var(--ll-code-line-nr)",
textAlign: "right",
paddingRight: "20px",
minWidth: "28px",
@@ -487,7 +488,7 @@ function PropsTable({
fontFamily: "var(--ll-font-primary)",
fontSize: "11px",
fontWeight: 400,
color: "rgba(0, 0, 0, 0.35)",
color: "var(--ll-text-muted)",
textTransform: "uppercase",
letterSpacing: "0.02em",
padding: "0 0 6px",
@@ -515,7 +516,7 @@ function PropsTable({
fontSize: "11px",
fontWeight: 400,
fontFamily: "var(--ll-font-primary)",
color: "rgba(0, 0, 0, 0.35)",
color: "var(--ll-text-muted)",
borderBottom: "1px solid var(--ll-border)",
}}
>
@@ -548,7 +549,7 @@ function PropsTable({
fontSize: "11px",
fontWeight: 400,
fontFamily: "var(--ll-font-code)",
color: "rgba(0, 0, 0, 0.35)",
color: "var(--ll-text-muted)",
borderBottom: "1px solid var(--ll-border)",
whiteSpace: "nowrap",
}}
@@ -561,7 +562,7 @@ function PropsTable({
fontSize: "11px",
fontWeight: 400,
fontFamily: "var(--ll-font-code)",
color: "rgba(0, 0, 0, 0.35)",
color: "var(--ll-text-muted)",
borderBottom: "1px solid var(--ll-border)",
}}
>
@@ -608,7 +609,7 @@ export default function LivelinePage() {
fontWeight: 475,
lineHeight: "15.6px",
letterSpacing: "-0.04px",
color: "rgba(18, 18, 18, 0.4)",
color: "var(--ll-text-secondary)",
margin: 0,
padding: "0 0 16px",
}}
@@ -622,7 +623,7 @@ export default function LivelinePage() {
fontWeight: 400,
lineHeight: "15.6px",
letterSpacing: "-0.04px",
color: "rgba(18, 18, 18, 0.25)",
color: "var(--ll-text-tertiary)",
}}
>
2025
website/src/styles/liveline-prism.css
+91
View File
@@ -133,3 +133,94 @@ pre[class*="language-"] {
.token {
text-shadow: none;
}
/* ======================================================================
Dark mode - GitHub Dark inspired palette
====================================================================== */
.dark code[class*="language-"],
.dark pre[class*="language-"] {
color: #e6edf3;
}
.dark .token.keyword,
.dark .token.module,
.dark .token.imports,
.dark .token.control-flow {
color: #ff7b72;
}
.dark .token.string,
.dark .token.template-string,
.dark .token.attr-value {
color: #a5d6ff;
}
.dark .token.function,
.dark .token.class-name {
color: #d2a8ff;
}
.dark .token.property,
.dark .token.parameter {
color: #ffa657;
}
.dark .token.tag .token.tag {
color: #7ee787;
}
.dark .token.tag .token.class-name {
color: #7ee787;
}
.dark .token.tag .token.attr-name,
.dark .token.attr-name {
color: #79c0ff;
}
.dark .token.number {
color: #79c0ff;
}
.dark .token.operator {
color: #ff7b72;
}
.dark .token.punctuation {
color: #e6edf3;
}
.dark .token.boolean,
.dark .token.constant,
.dark .token.builtin {
color: #79c0ff;
}
.dark .token.comment,
.dark .token.prolog,
.dark .token.doctype,
.dark .token.cdata {
color: #8b949e;
font-style: italic;
}
.dark .token.tag .token.punctuation {
color: #e6edf3;
}
.dark .token.spread {
color: #ff7b72;
}
.dark .token.plain-text {
color: #e6edf3;
}
.dark .token.regex {
color: #a5d6ff;
}
.dark .language-bash .token.function {
color: #79c0ff;
}
website/src/styles/liveline.css
+85 -13
View File
@@ -46,11 +46,21 @@
--ll-text-primary: rgb(17, 17, 17);
--ll-text-secondary: rgba(0, 0, 0, 0.4);
--ll-text-tertiary: rgba(0, 0, 0, 0.25);
--ll-text-muted: rgba(0, 0, 0, 0.35);
--ll-text-hover: rgba(0, 0, 0, 0.7);
--ll-bg: #fff;
--ll-border: #e3e3e3;
--ll-divider: rgb(242, 242, 242);
--ll-code-bg: rgba(0, 0, 0, 0.02);
--ll-code-line-nr: rgba(0, 0, 0, 0.15);
--ll-selection-bg: rgba(0, 0, 0, 0.08);
/* Button / back button */
--ll-btn-bg: #fff;
--ll-btn-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px,
rgba(0, 0, 0, 0.04) 0px 4px 16px,
rgba(0, 0, 0, 0.06) 0px 0px 0px 1px inset;
/* P3 accent colors (wider gamut) */
--ll-primary: #3e9fff;
--ll-secondary: #f09637;
@@ -65,6 +75,68 @@
0 0.3125rem 0.5rem rgba(0, 0, 0, 0.02),
0 0.125rem 0.25rem rgba(0, 0, 0, 0.016),
0 0 0.125rem rgba(0, 0, 0, 0.01);
/* Header fade gradient stops (white) */
--ll-fade-0: rgb(255, 255, 255);
--ll-fade-1: rgba(255, 255, 255, 0.737);
--ll-fade-2: rgba(255, 255, 255, 0.541);
--ll-fade-3: rgba(255, 255, 255, 0.382);
--ll-fade-4: rgba(255, 255, 255, 0.278);
--ll-fade-5: rgba(255, 255, 255, 0.194);
--ll-fade-6: rgba(255, 255, 255, 0.126);
--ll-fade-7: rgba(255, 255, 255, 0.075);
--ll-fade-8: rgba(255, 255, 255, 0.042);
--ll-fade-9: rgba(255, 255, 255, 0.021);
--ll-fade-10: rgba(255, 255, 255, 0.008);
--ll-fade-11: rgba(255, 255, 255, 0.002);
--ll-fade-12: rgba(255, 255, 255, 0);
}
/* Dark mode overrides */
.dark .liveline-page {
--ll-text-primary: rgba(255, 255, 255, 0.9);
--ll-text-secondary: rgba(255, 255, 255, 0.45);
--ll-text-tertiary: rgba(255, 255, 255, 0.25);
--ll-text-muted: rgba(255, 255, 255, 0.35);
--ll-text-hover: rgba(255, 255, 255, 0.7);
--ll-bg: rgb(17, 17, 17);
--ll-border: rgba(255, 255, 255, 0.1);
--ll-divider: rgba(255, 255, 255, 0.06);
--ll-code-bg: rgba(255, 255, 255, 0.05);
--ll-code-line-nr: rgba(255, 255, 255, 0.15);
--ll-selection-bg: rgba(255, 255, 255, 0.1);
--ll-btn-bg: rgb(30, 30, 30);
--ll-btn-shadow: rgba(255, 255, 255, 0.05) 0px 2px 8px,
rgba(255, 255, 255, 0.02) 0px 4px 16px,
rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
--ll-primary: #60a5fa;
--ll-secondary: #f5a623;
--ll-overlay-bg: hsla(0, 0%, 7%, 0.8);
--ll-overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
0 1.625rem 3.375rem rgba(0, 0, 0, 0.3),
0 1rem 2rem rgba(0, 0, 0, 0.2),
0 0.625rem 1rem rgba(0, 0, 0, 0.15),
0 0.3125rem 0.5rem rgba(0, 0, 0, 0.1),
0 0.125rem 0.25rem rgba(0, 0, 0, 0.08),
0 0 0.125rem rgba(0, 0, 0, 0.05);
/* Header fade gradient stops (dark) */
--ll-fade-0: rgb(17, 17, 17);
--ll-fade-1: rgba(17, 17, 17, 0.737);
--ll-fade-2: rgba(17, 17, 17, 0.541);
--ll-fade-3: rgba(17, 17, 17, 0.382);
--ll-fade-4: rgba(17, 17, 17, 0.278);
--ll-fade-5: rgba(17, 17, 17, 0.194);
--ll-fade-6: rgba(17, 17, 17, 0.126);
--ll-fade-7: rgba(17, 17, 17, 0.075);
--ll-fade-8: rgba(17, 17, 17, 0.042);
--ll-fade-9: rgba(17, 17, 17, 0.021);
--ll-fade-10: rgba(17, 17, 17, 0.008);
--ll-fade-11: rgba(17, 17, 17, 0.002);
--ll-fade-12: rgba(17, 17, 17, 0);
}
@supports (color: color(display-p3 1 1 1)) {
@@ -130,18 +202,18 @@
right: 0;
height: 8rem;
background: linear-gradient(
rgb(255, 255, 255) 0px,
rgba(255, 255, 255, 0.737) 19%,
rgba(255, 255, 255, 0.541) 34%,
rgba(255, 255, 255, 0.382) 47%,
rgba(255, 255, 255, 0.278) 56.5%,
rgba(255, 255, 255, 0.194) 65%,
rgba(255, 255, 255, 0.126) 73%,
rgba(255, 255, 255, 0.075) 80.2%,
rgba(255, 255, 255, 0.042) 86.1%,
rgba(255, 255, 255, 0.021) 91%,
rgba(255, 255, 255, 0.008) 95.2%,
rgba(255, 255, 255, 0.002) 98.2%,
rgba(255, 255, 255, 0) 100%
var(--ll-fade-0) 0px,
var(--ll-fade-1) 19%,
var(--ll-fade-2) 34%,
var(--ll-fade-3) 47%,
var(--ll-fade-4) 56.5%,
var(--ll-fade-5) 65%,
var(--ll-fade-6) 73%,
var(--ll-fade-7) 80.2%,
var(--ll-fade-8) 86.1%,
var(--ll-fade-9) 91%,
var(--ll-fade-10) 95.2%,
var(--ll-fade-11) 98.2%,
var(--ll-fade-12) 100%
);
}