DARK MODE by oalders · Pull Request #3617 · metacpan/metacpan-web

oalders · 2026-04-09T19:12:31Z

No description provided.

codecov · 2026-04-09T19:15:13Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.80%. Comparing base (83c5684) to head (31173bf).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3617   +/-   ##
=======================================
  Coverage   76.80%   76.80%           
=======================================
  Files          71       71           
  Lines        2522     2522           
  Branches      360      360           
=======================================
  Hits         1937     1937           
  Misses        455      455           
  Partials      130      130

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Grinnz · 2026-04-09T20:56:30Z

MINOR: Contrast of the favorites and github star buttons are a little jarring

Grinnz · 2026-04-09T20:58:20Z

pod2html textarea text is dark gray

Grinnz · 2026-04-09T21:03:43Z

Github info popups aren't completely darkified

haarg · 2026-04-09T21:35:18Z


 # files that have inline <script> tags
-my %skip = map { $_ => 1 } ();
+my %skip = map { $_ => 1 } ('root/base.tx');


This isn't needed when using an external js file.

I didn't think so either, but the test failed until I added it. I'll test again.

Looks like the checks the test is doing need to be fixed.

haarg · 2026-04-09T21:36:52Z

 <html lang="en-US">
    <head>
-        <script>(function(){var t=localStorage.getItem('theme');if(!t)t=window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';document.documentElement.setAttribute('data-bs-theme',t)})()</script>
+        <script src="/static/js/theme-init.js"></script>


This could present caching problems if the script needed to be changed. It's simple enough that we may think that's acceptable.

Probably needs blocking="render".

haarg · 2026-04-09T21:44:05Z

@@ -0,0 +1,7 @@
+(function () {
+    var t = localStorage.getItem('theme');


If this was a let rather than a var, the wrapping anon function would not be needed.

The file probably wants a 'use strict';

theme-init must be render-blocking to prevent flash of unstyled content

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

GitHub and Codeberg ship solid-black marks that vanish on the dark author sidebar. Invert only the grayscale ones; colored logos would have their brand hue distorted. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

.sponsors-tier-price never matched; the real class is .sponsor-tier-price, so the amounts stayed near-black on the dark card. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Footer used <img>, so the page's --text-color could not reach the SVG; the invert/hue-rotate hack made the wordmark grey and shifted the brand dots. Use inline <use href=...#logo> like the header so one color source drives both. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

- .testers-fail red #f44336 (4.04:1) -> #f87168 (5.35:1) - .pod-placeholder label: set body color (was inherited grey, 2.97:1) - scope .qtip-content th dark bg to .qtip-github so non-github tooltips don't get dark-on-dark header text Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Grey gutter numbers were 1.11:1 on the green current-line band and effectively invisible. Flip them to the dark body-bg color (4.63:1) without recoloring the band. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

The toggle's label already flips Show/Hide Pod; the extra bold + filled background on the not-hidden state just read as arbitrary. Drop it so the button looks the same in both states (hover still gives feedback). Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

"Show"/"Hide" render at different widths, so the button jumped ~5px on toggle. Wrap the two verbs and overlay them in one grid cell (visibility, not display) so the button always reserves the wider label. No magic numbers; adapts to font size and zoom. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

oalders · 2026-09-17T21:34:13Z

I think all of the comments have been addressed. I've also done an a11y audit for contrast which picked up a few things that are now fixed as well.

oalders force-pushed the bootstrap-dark-mode branch 4 times, most recently from 89428d5 to 294fae9 Compare April 9, 2026 20:41

haarg reviewed Apr 9, 2026

View reviewed changes

oalders force-pushed the bootstrap-dark-mode branch from 294fae9 to e21699a Compare April 24, 2026 14:40

oalders and others added 15 commits September 17, 2026 17:30

Add dark mode toggle

74da2c0

add root/base.tx to inline script skip list

8e70b54

theme-init must be render-blocking to prevent flash of unstyled content

theme-init: use strict + let, drop IIFE

887451e

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

base.tx: mark theme-init render-blocking

e868f7b

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

html.t: skip src scripts, check all tags, unskip base.tx

8995000

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

dark-mode: fix pod2html textarea text color

532626e

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

dark-mode: darken GitHub star button

3cfa110

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

dark-mode: darken GitHub info popup

a91606c

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

dark-mode: invert dark git-forge profile icons

10175d5

GitHub and Codeberg ship solid-black marks that vanish on the dark author sidebar. Invert only the grayscale ones; colored logos would have their brand hue distorted. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

dark-mode: fix sponsor tier price color (selector typo)

0d7b64b

.sponsors-tier-price never matched; the real class is .sponsor-tier-price, so the amounts stayed near-black on the dark card. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

dark-mode: darken highlighted-line gutter numbers

f272a17

Grey gutter numbers were 1.11:1 on the green current-line band and effectively invisible. Flip them to the dark body-bg color (4.63:1) without recoloring the band. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

oalders force-pushed the bootstrap-dark-mode branch from e21699a to 31173bf Compare September 17, 2026 21:32

ranguard approved these changes Sep 18, 2026

View reviewed changes

oalders merged commit b4caf5d into master Sep 18, 2026
12 checks passed

oalders deleted the bootstrap-dark-mode branch September 18, 2026 14:22

oalders mentioned this pull request Sep 18, 2026

Build container: add concurrency group so overlapping master builds can't deploy an older commit #3733

Closed

Navigation Menu

Repository navigation

DARK MODE - #3617

DARK MODE#3617
oalders merged 15 commits into
masterfrom
bootstrap-dark-mode

oalders commented Apr 9, 2026

Uh oh!

codecov Bot commented Apr 9, 2026 •

edited

Loading

Uh oh!

Grinnz commented Apr 9, 2026

Uh oh!

Grinnz commented Apr 9, 2026

Uh oh!

Grinnz commented Apr 9, 2026

Uh oh!

haarg Apr 9, 2026

Uh oh!

oalders Apr 9, 2026

Uh oh!

haarg Apr 10, 2026

Uh oh!

haarg Apr 9, 2026

Uh oh!

haarg Apr 9, 2026

Uh oh!

oalders commented Sep 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		@@ -0,0 +1,7 @@
		(function () {
		var t = localStorage.getItem('theme');

Conversation

oalders commented Apr 9, 2026

Uh oh!

codecov Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Grinnz commented Apr 9, 2026

Uh oh!

Grinnz commented Apr 9, 2026

Uh oh!

Grinnz commented Apr 9, 2026

Uh oh!

haarg Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

oalders Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

haarg Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

haarg Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

haarg Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

oalders commented Sep 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov Bot commented Apr 9, 2026 •

edited

Loading