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

[jonhickman]

Summary

• Replaces color-mod(var(--color-darkmode) l(+8%)) with var(--color-secondary-text) for hr border and background in dark mode
• Consistent with how other secondary text colours are handled in the theme

Test plan

• Verify hr elements render correctly in dark mode
• Add screenshots (before/after)

[coderabbitai]

Walkthrough

The pull request updates dark-mode styling for horizontal rule elements (hr and hr:after) across two CSS files. The changes replace color-adjusted values using color-mod(var(--color-darkmode) l(+8%)) with the direct theme variable var(--color-secondary-text) for border-top-color and background properties. The box-shadow declarations remain unchanged. This simplifies the dark-mode color scheme by consolidating styling to use a predefined secondary text color variable instead of calculated darkmode color adjustments.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: replacing a color-mod function with a CSS variable for dark mode hr styling.
Description check	✅ Passed	The description is directly related to the changeset, explaining the motivation and specific changes made to hr styling in dark mode.
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

---

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 dark-scheme rules for hr in the html.auto-color
block must mirror the html.dark-mode change: locate the html.auto-color hr and
html.auto-color .gh-content hr:after rules (the ones still using color-mod(...))
and replace their color-mod(...) usages with the same tokens used in
html.dark-mode—use var(--color-secondary-text) for the hr color and for the
hr:after background, and ensure the box-shadow color matches
var(--color-darkmode) as in html.dark-mode so both auto-color and explicit
dark-mode paths render consistently.

🪄 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: ed52f23f-7185-43c3-b601-1aedc9950830

📥 Commits

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

⛔ 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 this token change in the html.auto-color dark-scheme block.

html.dark-mode now uses var(--color-secondary-text), but html.auto-color hr / hr:after still use color-mod(...) (Line 2474, Line 2478). This makes dark appearance inconsistent depending on mode path.

🎯 Proposed fix

 `@media` (prefers-color-scheme: dark) {
@@
     html.auto-color hr {
-        border-top-color: color-mod(var(--color-darkmode) l(+8%));
+        border-top-color: var(--color-secondary-text);
     }

     html.auto-color .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;
     }
 }

🤖 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 dark-scheme rules for hr
in the html.auto-color block must mirror the html.dark-mode change: locate the
html.auto-color hr and html.auto-color .gh-content hr:after rules (the ones
still using color-mod(...)) and replace their color-mod(...) usages with the
same tokens used in html.dark-mode—use var(--color-secondary-text) for the hr
color and for the hr:after background, and ensure the box-shadow color matches
var(--color-darkmode) as in html.dark-mode so both auto-color and explicit
dark-mode paths render consistently.