Skip to content

Fix dark mode hr colour to use CSS variable instead of color-mod #1041

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jonhickman wants to merge 4 commits into from
+6 −6
Closed

Fix dark mode hr colour to use CSS variable instead of color-mod #1041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d7911b4
🐛 Fix dark mode secondary text colour broken by postcss-color-mod-fun…
jonhickman Mar 23, 2026
9a71b49
Fix gulp zip task broken by gulp-zip v6 API change
jonhickman Mar 23, 2026
1b264fe
Revert "Fix gulp zip task broken by gulp-zip v6 API change"
jonhickman Mar 25, 2026
f08e3aa
Fix dark mode hr colour to use CSS variable instead of color-mod
jonhickman Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/built/screen.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/built/screen.css.map
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions assets/css/screen.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2193,7 +2193,7 @@ html.dark-mode .post-card-image {
}

html.dark-mode :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content, .pagination .page-number) {
color: color-mod(var(--color-secondary-text) l(-22%));
color: var(--color-secondary-text);
}

html.dark-mode .post-card-featured {
Expand Down Expand Up @@ -2277,11 +2277,11 @@ html.dark-mode .gh-content code {
}

html.dark-mode hr {
border-top-color: color-mod(var(--color-darkmode) l(+8%));
border-top-color: var(--color-secondary-text);
}

html.dark-mode .gh-content hr:after {
background: color-mod(var(--color-darkmode) l(+8%));
background: var(--color-secondary-text);
box-shadow: var(--color-darkmode) 0 0 0 5px;
Comment on lines 2279 to 2285
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Mirror the HR fix in html.auto-color dark-scheme rules.

Line 2280 and Line 2284 fix explicit dark mode, but the equivalent @media (prefers-color-scheme: dark) html.auto-color HR rules still use color-mod(...), so the divider can remain too low-contrast for auto-color users.

🔧 Proposed fix 
@@
-    html.auto-color hr {
-        border-top-color: color-mod(var(--color-darkmode) l(+8%));
-    }
+    html.auto-color hr {
+        border-top-color: var(--color-secondary-text);
+    }

@@
-    html.auto-color .gh-content hr:after {
-        background: color-mod(var(--color-darkmode) l(+8%));
+    html.auto-color .gh-content hr:after {
+        background: var(--color-secondary-text);
         box-shadow: var(--color-darkmode) 0 0 0 5px;
     }
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@assets/css/screen.css` around lines 2279 - 2285, The auto-color dark-scheme
HR rules still use color-mod(...) and should mirror the explicit dark-mode
rules: update the selectors html.auto-color hr and html.auto-color .gh-content
hr:after to use var(--color-secondary-text) for border-top-color/background and
use box-shadow: var(--color-darkmode) 0 0 0 5px for the after element, replacing
any color-mod(...) expressions so auto-color users get the same high-contrast
divider as html.dark-mode.

}

Expand Down Expand Up @@ -2387,7 +2387,7 @@ html.dark-mode .footer-cta-title {
}

html.auto-color :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content, .pagination .page-number) {
color: color-mod(var(--color-secondary-text) l(-22%));
color: var(--color-secondary-text);
}

html.auto-color .post-card-featured {
Expand Down