Fixed missing dark mode colours

[weylandswart]

Ref https://linear.app/ghost/issue/DES-1295/dawn-theme-code-blocks-unreadable-in-dark-mode
Closes #323
Closes #320

We were missing a few dark mode colour referneces which forced their light mode counterparts to be used.

Before	After

[coderabbitai]

Walkthrough

Two CSS files have been modified to address styling consistency. The dark.css file introduces four new CSS custom property aliases (--color-lighter-gray, --color-light-gray, --color-mid-gray, --color-dark-gray) in both the root theme section and the dark-mode media query to ensure consistent variable naming across light and dark modes. The screen.css built file shows the entire CSS ruleset duplicated consecutively, creating two identical blocks of rules including variables and selectors. No semantic styling changes occur from the duplication since both blocks are identical.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The dark.css changes align with objectives; however, screen.css contains a CSS duplication that appears unrelated to the dark mode color fix objective.	Remove the duplicated CSS block in screen.css, as it increases file size without addressing the dark mode color issue and should not be included in this PR.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title accurately describes the main change: adding missing dark mode CSS color variable definitions to fix readability issues.
Description check	✅ Passed	Description is directly related to the changeset, references the linked issue, and includes before/after screenshots demonstrating the fix.
Linked Issues check	✅ Passed	The PR adds missing dark mode color alias variables (--color-lighter-gray, --color-light-gray, --color-mid-gray, --color-dark-gray) to dark.css, directly addressing the issue of missing dark mode color references causing light mode colors to be used.
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
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-missing-dark-mode-colours

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/dawn/assets/css/misc/dark.css (1)

91-106: ⚠️ Potential issue | 🟠 Major

--color-primary-text has no dark-mode override.

The base :root in screen.css defines --color-primary-text: #333``, and it is used directly in the body element's color property. However, neither `.theme-dark:root` nor the `@media (prefers-color-scheme: dark)` media query block at lines 91-106 overrides this variable. This causes body text to render as dark (`#333`) on a dark background in dark mode, creating an unreadable contrast issue. The PR's referenced issue highlights this variable naming mismatch (`--primary-text-color` vs `--color-primary-text`) — the dark-mode overrides only update the underscore-separated variant, leaving the hyphenated color variable fallback unhandled.

🤖 Prompt for AI Agents

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

In `@packages/dawn/assets/css/misc/dark.css` around lines 91 - 106, The dark-mode
CSS is missing an override for the variable used by body (--color-primary-text)
while dark rules define --primary-text-color and similar variants; update
html:not(.theme-light):root (or the dark theme block) to set
--color-primary-text to the correct light value (e.g., `#e2e2e2`) or
rename/synchronize variables so both --primary-text-color and
--color-primary-text are set in the dark block (refer to
html:not(.theme-light):root and the body color usage that reads
--color-primary-text).

🧹 Nitpick comments (1)

packages/dawn/assets/css/misc/dark.css (1)

97-103: Core fix looks correct — but --color-light-color is missing from the media query block.

The four added aliases correctly mirror the .theme-dark:root values (lines 7, 9, 12, 14) and resolve the dark-mode pre background issue (pre uses var(--color-lighter-gray) which now resolves to #2f333c instead of the light-mode #f6f6f6).

However, .theme-dark:root also declares --color-light-color: #3b3e46`` (line 10), but that variable is absent from the @media (prefers-color-scheme: dark) block. This creates a drift between the two dark-mode activation paths: explicit `.theme-dark` class vs. OS-level preference.

♻️ Proposed addition to align the media query with `.theme-dark:root`

         --light-gray-color: `#3b3e46`;
         --color-light-gray: `#3b3e46`;
+        --color-light-color: `#3b3e46`;
         --mid-gray-color: `#666`;

🤖 Prompt for AI Agents

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

In `@packages/dawn/assets/css/misc/dark.css` around lines 97 - 103, Add the
missing dark-mode alias for --color-light-color inside the `@media`
(prefers-color-scheme: dark) block so it matches the explicit .theme-dark:root
declaration; update the media query to declare --color-light-color: `#3b3e46`
alongside the existing aliases (--color-lighter-gray, --light-gray-color, etc.)
to ensure consistent values between .theme-dark:root and the
prefers-color-scheme dark path.

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@packages/dawn/assets/built/screen.css`:
- Line 1: The file contains a duplicated build artifact (the entire generated
ruleset including :root and keyframes like `@keyframes` bounceIn/zoomOut
repeated), so do not edit screen.css directly; instead remove the duplication
from the original source CSS under assets/css (fix the duplicate keyframes and
repeated :root variables in the source files), run the project's CSS build step
to regenerate assets/built/screen.css, verify the duplicated `@keyframes`
(bounceIn, zoomOut) and repeated :root block are gone, and commit the
regenerated artifact.

---

Outside diff comments:
In `@packages/dawn/assets/css/misc/dark.css`:
- Around line 91-106: The dark-mode CSS is missing an override for the variable
used by body (--color-primary-text) while dark rules define --primary-text-color
and similar variants; update html:not(.theme-light):root (or the dark theme
block) to set --color-primary-text to the correct light value (e.g., `#e2e2e2`) or
rename/synchronize variables so both --primary-text-color and
--color-primary-text are set in the dark block (refer to
html:not(.theme-light):root and the body color usage that reads
--color-primary-text).

---

Nitpick comments:
In `@packages/dawn/assets/css/misc/dark.css`:
- Around line 97-103: Add the missing dark-mode alias for --color-light-color
inside the `@media` (prefers-color-scheme: dark) block so it matches the explicit
.theme-dark:root declaration; update the media query to declare
--color-light-color: `#3b3e46` alongside the existing aliases
(--color-lighter-gray, --light-gray-color, etc.) to ensure consistent values
between .theme-dark:root and the prefers-color-scheme dark path.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2b1b014 and 644ee81.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (2)

• packages/dawn/assets/built/screen.css
• packages/dawn/assets/css/misc/dark.css

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Entire CSS block is duplicated — screen.css should not be manually edited.

screen.css is a build artifact (assets/built/). The AI summary and both static-analysis tools confirm the same: Biome flags "duplicate keyframe selector overwritten by later one" and Stylelint flags duplicate 0%, 40%, and to keyframe stops — all symptoms of the full ruleset being appended twice. This doubles the transferred and parsed payload with zero semantic benefit.

The correct workflow is:

1. Make changes only in the source CSS files (assets/css/).
2. Run the build step to regenerate screen.css.
3. Commit the regenerated artifact.

Manually patching a built file risks the duplication being silently committed and the fix being wiped on the next build.

🧰 Tools

🪛 Biome (2.4.4)

[error] 1-1: The duplicate keyframe selector is overwritten by later one.

(lint/suspicious/noDuplicateSelectorsKeyframeBlock)

🪛 Stylelint (17.3.0)

[error] 1-1: Unexpected deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)

(declaration-property-value-keyword-no-deprecated)

---

[error] 1-1: Unexpected deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)

(declaration-property-value-keyword-no-deprecated)

---

[error] 1-1: Unexpected deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)

(declaration-property-value-keyword-no-deprecated)

---

[error] 1-1: Unexpected deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)

(declaration-property-value-keyword-no-deprecated)

---

[error] 1-1: Unexpected deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)

(declaration-property-value-keyword-no-deprecated)

---

[error] 1-1: Unexpected deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)

(declaration-property-value-keyword-no-deprecated)

---

[error] 1-1: Unexpected deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)

(declaration-property-value-keyword-no-deprecated)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Expected quotes around "url" function argument (function-url-quotes)

(function-url-quotes)

---

[error] 1-1: Unexpected duplicate "0%" (keyframe-block-no-duplicate-selectors)

(keyframe-block-no-duplicate-selectors)

---

[error] 1-1: Unexpected duplicate "40%" (keyframe-block-no-duplicate-selectors)

(keyframe-block-no-duplicate-selectors)

---

[error] 1-1: Unexpected duplicate "to" (keyframe-block-no-duplicate-selectors)

(keyframe-block-no-duplicate-selectors)

---

[error] 1-1: Expected "to" to be "100%" (keyframe-selector-notation)

(keyframe-selector-notation)

---

[error] 1-1: Expected "to" to be "100%" (keyframe-selector-notation)

(keyframe-selector-notation)

---

[error] 1-1: Expected "to" to be "100%" (keyframe-selector-notation)

(keyframe-selector-notation)

---

[error] 1-1: Expected "to" to be "100%" (keyframe-selector-notation)

(keyframe-selector-notation)

---

[error] 1-1: Expected "to" to be "100%" (keyframe-selector-notation)

(keyframe-selector-notation)

---

[error] 1-1: Expected keyframe name "bounceIn" to be kebab-case (keyframes-name-pattern)

(keyframes-name-pattern)

---

[error] 1-1: Expected keyframe name "zoomOut" to be kebab-case (keyframes-name-pattern)

(keyframes-name-pattern)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected complex :not() pseudo-class notation (selector-not-notation)

(selector-not-notation)

---

[error] 1-1: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Segoe" to be "segoe" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "UI" to be "ui" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Helvetica" to be "helvetica" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Arial" to be "arial" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Georgia" to be "georgia" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Mulish" to be "mulish" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Segoe" to be "segoe" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "UI" to be "ui" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Helvetica" to be "helvetica" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Arial" to be "arial" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Lora" to be "lora" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Times" to be "times" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Menlo" to be "menlo" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Consolas" to be "consolas" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Monaco" to be "monaco" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Liberation" to be "liberation" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Mono" to be "mono" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Lucida" to be "lucida" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "Console" to be "console" (value-keyword-case)

(value-keyword-case)

---

[error] 1-1: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

🤖 Prompt for AI Agents

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

In `@packages/dawn/assets/built/screen.css` at line 1, The file contains a
duplicated build artifact (the entire generated ruleset including :root and
keyframes like `@keyframes` bounceIn/zoomOut repeated), so do not edit screen.css
directly; instead remove the duplication from the original source CSS under
assets/css (fix the duplicate keyframes and repeated :root variables in the
source files), run the project's CSS build step to regenerate
assets/built/screen.css, verify the duplicated `@keyframes` (bounceIn, zoomOut)
and repeated :root block are gone, and commit the regenerated artifact.