18b36a2 | website

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

18b36a2 — pyrossh 2026-11-06T15:29:20+05:30

Improve markdown readability in light and dark themes

Files changed (3) hide show

assets/css/markdown.css +40 -16
assets/css/shared.css +9 -9
tests/pages.test.js +53 -0

assets/css/markdown.css CHANGED Viewed

@@ -10,9 +10,32 @@
    between markdown content and the file-viewer, so it stays global
    rather than duplicated here). */
 .markdown-body {
+  /* Reading colors, redefined here so long documents get them without changing
+     the rest of the site. Targets are about 12:1 for body text, since the
+     site-wide near-white on near-black (18:1) is harsh for long reading, and at
+     least 4.5:1 for everything else, including syntax tokens in light mode. */
+  --color-text: light-dark(hsl(0, 0%, 20%), hsl(210, 14%, 86%));
+  --color-heading: light-dark(hsl(0, 0%, 12%), hsl(210, 17%, 95%));
+  --color-link: light-dark(hsl(211, 100%, 36%), hsl(211, 100%, 72%));
+  --color-pre-bg: light-dark(hsl(0, 0%, 98%), hsl(210, 13%, 6%));
+  --color-code-fg: light-dark(hsl(348, 80%, 34%), hsl(348, 75%, 80%));
+  --color-code-bg: light-dark(hsl(0, 0%, 90%), hsl(210, 11%, 17%));
+  --color-markdown-border: light-dark(hsl(0, 0%, 80%), hsl(210, 10%, 26%));
+  color: var(--color-text);
   font-size: 1.1rem;
   line-height: 1.5;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong {
+    color: var(--color-heading);
+  }
   h1 {
     font-size: var(--fs-heading-md);
     font-weight: 700;
@@ -74,25 +97,28 @@
     margin-bottom: 0;
   }
-  p code,
+  /* Inline code anywhere (paragraphs, lists, tables, headings), not fenced
+     blocks. Sized relative to its surroundings so it stays in proportion. */
-  li code {
+  :not(pre) > code {
-    color: var(--color-code-fg) !important;
+    color: var(--color-code-fg);
-    background: var(--color-code-bg) !important;
+    background: var(--color-code-bg);
     word-wrap: break-word;
     box-decoration-break: clone;
     padding: 2px 4px;
     border-radius: 0.2rem;
     font-weight: 400;
-    font-size: 0.8rem;
+    font-size: 0.85em;
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   }
-  /* Fenced code blocks in a README (markdown-it output — no language-
-     class on the <pre> itself, unlike Prism's blog-post output, which is
-     how this targets only the README case) get a subtle border + corner
-     radius, matching the framed-code-block look. */
+  /* Code inside a link has to still read as a link. */
+  a[href] > code {
-  pre:not([class*="language-"]) {
+    color: var(--color-link);
+  }
+  pre {
+    font-size: 0.9rem;
-    border: 1px solid var(--color-box-bg);
+    border: 1px solid var(--color-markdown-border);
     border-radius: 0.4rem;
   }
@@ -113,7 +139,7 @@
   th,
   td {
-    border: 1px solid var(--color-box-bg);
+    border: 1px solid var(--color-markdown-border);
     padding: 0.4rem 0.8rem;
     text-align: left;
   }
@@ -128,10 +154,8 @@
   }
   blockquote {
-    font-size: 1.2rem;
-    font-weight: 600;
-    background: var(--color-highlight-bg);
+    border-left: 3px solid var(--color-markdown-border);
-    padding: 0.4rem;
+    padding: 0.2rem 0 0.2rem 0.9rem;
     margin: 16px 0px;
     p {

assets/css/shared.css CHANGED Viewed

@@ -77,15 +77,15 @@ table { border-collapse: collapse; }
   --color-code-bg: light-dark(hsl(0, 0%, 89%), hsl(210, 13%, 6%));
   --color-pre-bg: light-dark(hsl(0, 0%, 89%), hsl(210, 13%, 6%));
   --color-tag: light-dark(hsl(152, 96%, 35%), hsl(152, 96%, 44%));
-  --token-comment: light-dark(hsl(220, 10%, 45%), hsl(220, 10%, 60%));
+  --token-comment: light-dark(hsl(220, 10%, 38%), hsl(220, 10%, 60%));
-  --token-keyword: light-dark(hsl(310, 60%, 45%), hsl(310, 70%, 72%));
+  --token-keyword: light-dark(hsl(310, 60%, 36%), hsl(310, 70%, 72%));
-  --token-string: light-dark(hsl(95, 45%, 35%), hsl(95, 55%, 65%));
+  --token-string: light-dark(hsl(95, 50%, 25%), hsl(95, 55%, 65%));
-  --token-function: light-dark(hsl(210, 70%, 45%), hsl(210, 80%, 72%));
+  --token-function: light-dark(hsl(210, 70%, 36%), hsl(210, 80%, 72%));
-  --token-number: light-dark(hsl(25, 80%, 42%), hsl(25, 90%, 65%));
+  --token-number: light-dark(hsl(25, 85%, 30%), hsl(25, 90%, 65%));
-  --token-builtin: light-dark(hsl(175, 55%, 32%), hsl(175, 60%, 60%));
+  --token-builtin: light-dark(hsl(175, 60%, 24%), hsl(175, 60%, 60%));
-  --token-punctuation: light-dark(hsl(220, 8%, 40%), hsl(220, 8%, 70%));
+  --token-punctuation: light-dark(hsl(220, 8%, 36%), hsl(220, 8%, 70%));
-  --token-tag: light-dark(hsl(0, 60%, 45%), hsl(0, 70%, 72%));
+  --token-tag: light-dark(hsl(0, 60%, 38%), hsl(0, 70%, 72%));
-  --token-attr-name: light-dark(hsl(35, 70%, 38%), hsl(35, 80%, 65%));
+  --token-attr-name: light-dark(hsl(35, 80%, 26%), hsl(35, 80%, 65%));
   color-scheme: light dark;
   --btn-light: none;
   --btn-dark: block;

tests/pages.test.js CHANGED Viewed

@@ -251,6 +251,59 @@ describe("repo pages", () => {
     assert.notEqual(style.color, style.parentColor);
   });
+  for (const colorScheme of ["dark", "light"]) {
+    test(`markdown text is comfortably readable in ${colorScheme} mode`, async () => {
+      await page.emulateMedia({ colorScheme });
+      try {
+        await goto(`/repos/${repoId}/files/README.md/`);
+        await page.locator("#file-content > .markdown-body").waitFor();
+        const ratios = await page.evaluate(() => {
+          const channels = (color) => color.match(/[\d.]+/g).slice(0, 3).map(Number);
+          const luminance = (color) => {
+            const [r, g, b] = channels(color).map((v) => {
+              const c = v / 255;
+              return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+            });
+            return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+          };
+          const contrast = (a, b) => {
+            const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+            return (hi + 0.05) / (lo + 0.05);
+          };
+          const style = (selector) => getComputedStyle(document.querySelector(selector));
+          const article = style("#file-content .markdown-body");
+          const pre = style("#file-content .markdown-body pre");
+          const inlineCode = style("#file-content .markdown-body :not(pre) > code");
+          const tokenColor = (name) => {
+            const probe = document.createElement("span");
+            probe.style.color = `var(--token-${name})`;
+            document.querySelector("#file-content .markdown-body pre").append(probe);
+            const { color } = getComputedStyle(probe);
+            probe.remove();
+            return color;
+          };
+          return {
+            body: contrast(article.color, article.backgroundColor),
+            link: contrast(style("#file-content .markdown-body a[href]").color, article.backgroundColor),
+            inlineCode: contrast(inlineCode.color, inlineCode.backgroundColor),
+            codeBlock: contrast(pre.color, pre.backgroundColor),
+            tokens: ["comment", "keyword", "string", "function", "number", "builtin", "punctuation", "tag", "attr-name"].map(
+              (name) => contrast(tokenColor(name), pre.backgroundColor),
+            ),
+          };
+        });
+        // Not just a floor: near-white on near-black is hard to read for long.
+        assert.ok(ratios.body >= 7 && ratios.body <= 14, `body text is ${ratios.body}:1`);
+        for (const [part, ratio] of Object.entries({ ...ratios, tokens: Math.min(...ratios.tokens) })) {
+          assert.ok(ratio >= 4.5, `${part} is ${ratio}:1`);
+        }
+      } finally {
+        await page.emulateMedia({ colorScheme: null });
+      }
+    });
+  }
   test("repo files index renders the tree and a default file", async () => {
     const response = await goto(`/repos/${repoId}/files/`);
     assert.equal(response.status(), 200);