From 8629cfbc2ced70da90dac16865e44907264720c1 Mon Sep 17 00:00:00 2001 From: Jan Klass Date: Sun, 25 Jan 2026 00:22:40 +0100 Subject: [PATCH 1/2] Introduce dark mode * Add a color-scheme meta tag to declare light and dark schemes, making use of browser defaults as well * Adjust site.css for dark mode coloring * Use variables and `light-dark()` instead of media queries and multiple blocks and overrides * 'bg' for background, 'fg' for foreground * Numbered color tiers and named categories * Use a set of subjectively sensible and coherent dark mode colors * Keep header coloring style, no inversion of fg and bg Note: The JSON and GitHub images have ugly kerning around the edges presumably because of transparency and quality. If it's a requirement then I can look into that for this PR. Otherwise, maybe I will take a look afterwards. Still, even with the kerning, I would prefer using a dark theme. --- src/_Layout.cshtml | 3 ++- src/css/site.css | 40 ++++++++++++++++++++++++++-------------- 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/src/_Layout.cshtml b/src/_Layout.cshtml index e294f32bb73..20187c1b1df 100644 --- a/src/_Layout.cshtml +++ b/src/_Layout.cshtml @@ -1,4 +1,4 @@ - + @Page.Title @@ -6,6 +6,7 @@ + diff --git a/src/css/site.css b/src/css/site.css index 0607bb27c6c..bef8b31147a 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -1,7 +1,19 @@ -@-ms-viewport { +@-ms-viewport { width: device-width; } +:root { + --bg-0: light-dark(white, #121212); + --bg-1: light-dark(#f1f1f1, #0e0e0e); + --bg-2: light-dark(#c0c0c0, #000); + --fg-0: light-dark(#333, #e0e0e0); + --fg-link: light-dark(dodgerblue, #67b4ff); + --bg-header: light-dark(#555, #222); + --fg-header: light-dark(white, var(--fg-0)); + --bg-selection: light-dark(#000, initial); + --fg-selection: light-dark(white, initial); +} + body { font: 18px/1.5 'Segoe UI', @@ -11,8 +23,8 @@ body { Arial, sans-serif; margin: 0; - background: white; - color: #333; + background: var(--bg-0); + color: var(--fg-0); -ms-touch-action: manipulation; touch-action: manipulation; } @@ -36,7 +48,7 @@ img { } a { - color: dodgerblue; + color: var(--fg-link); } a:hover { @@ -49,13 +61,13 @@ ol { } ::selection { - background: #000; - color: white; + background: var(--bg-selection); + color: var(--fg-selection); } ::-moz-selection { - background: #000; - color: white; + background: var(--bg-selection); + color: var(--fg-selection); } .container { @@ -65,14 +77,14 @@ ol { } header { - background: #555; - color: #fff; + background: var(--bg-header); + color: var(--fg-header); height: 60px; line-height: 60px; } header h1 a { - color: #fff; + color: var(--fg-header); text-decoration: none; margin: 0; } @@ -94,9 +106,9 @@ header h1 a { #main article pre { overflow: auto; max-width: 100%; - background: #f1f1f1; + background: var(--bg-1); padding: 0.6em; - border: 1px solid silver; + border: 1px solid var(--bg-2); border-radius: 5px; line-height: normal; } @@ -156,7 +168,7 @@ footer { } footer p { - border-top: 1px solid #f1f1f1; + border-top: 1px solid var(--bg-1); margin-top: 50px; padding-top: 10px; } From a4ee1ef715dfd200c9c36ed1c0e44c115dcc392b Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Sat, 24 Jan 2026 23:47:30 +0000 Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/css/site.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/css/site.css b/src/css/site.css index bef8b31147a..ae8c29172c4 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -3,15 +3,15 @@ } :root { - --bg-0: light-dark(white, #121212); - --bg-1: light-dark(#f1f1f1, #0e0e0e); - --bg-2: light-dark(#c0c0c0, #000); - --fg-0: light-dark(#333, #e0e0e0); - --fg-link: light-dark(dodgerblue, #67b4ff); - --bg-header: light-dark(#555, #222); - --fg-header: light-dark(white, var(--fg-0)); - --bg-selection: light-dark(#000, initial); - --fg-selection: light-dark(white, initial); + --bg-0: light-dark(white, #121212); + --bg-1: light-dark(#f1f1f1, #0e0e0e); + --bg-2: light-dark(#c0c0c0, #000); + --fg-0: light-dark(#333, #e0e0e0); + --fg-link: light-dark(dodgerblue, #67b4ff); + --bg-header: light-dark(#555, #222); + --fg-header: light-dark(white, var(--fg-0)); + --bg-selection: light-dark(#000, initial); + --fg-selection: light-dark(white, initial); } body {