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

[jonhickman]

Summary

• Ghost users reported that the divider card (hr) in Ghost was not producing a visible divider in Casper, under Dark Mode
• this is a similar issue and fix to Fix dark mode secondary text colour broken by postcss-color-mod-function v4 #1040 which improved color contrast for post metadata
• Replaces color-mod(var(--color-darkmode) l(+8%)) with var(--color-secondary-text) for hr border and background in dark mode
• Consistent with how secondary text colours are handled elsewhere in the theme

Before

After

[coderabbitai]

Walkthrough

This PR updates CSS styling for dark-mode and auto-color theme variants. The minified assets/built/screen.css is regenerated with no functional rule changes. The source assets/css/screen.css simplifies color calculations by replacing color-mod() functions (which performed lightness adjustments) with direct CSS variable references. Changes affect dark-mode styling for post card tags, meta information, article tags, byline content, and pagination elements, where secondary text color values are updated.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: fixing dark mode hr color by replacing color-mod with a CSS variable, which matches the core objective of the PR.
Description check	✅ Passed	The description is directly related to the changeset, explaining the bug (invisible hr in dark mode), the solution (replacing color-mod with var(--color-secondary-text)), and including before/after screenshots demonstrating the fix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

⚔️ Resolve merge conflicts

• Resolve merge conflict in branch doitdoug-dev

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@assets/css/screen.css`:
- Around line 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.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e3702c7d-1a68-4ff1-ab78-26f68a61482e

📥 Commits

Reviewing files that changed from the base of the PR and between 24e244e and f08e3aa.

⛔ Files ignored due to path filters (1)

• assets/built/screen.css.map is excluded by !**/*.map

📒 Files selected for processing (2)

• assets/built/screen.css
• assets/css/screen.css

[coderabbitai]

⚠️ 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.

[jonhickman]

Closing in favour of a cleaner branch — will reopen shortly.