Skip to content

Make dark them b/w again - #25

Merged
Siedlerchr merged 3 commits into
mainfrom
fixDarkTheme
Sep 21, 2026
Merged

Siedlerchr merged 3 commits into
mainfrom
fixDarkTheme

Conversation

@Siedlerchr

Copy link
Copy Markdown
Member

Fixes #23

@qodo-free-for-open-source-projects

qodo-free-for-open-source-projects Bot commented Sep 21, 2026 •

Copy link
Copy Markdown

PR Summary by Qodo

Restore the Black-and-White Dark Theme

🐞 Bug fix 🕐 Less than 10 minutes

Grey Divider

AI Description

• Restores pure black backgrounds and white content across both dark-mode activation paths.
• Keeps the header light and readable regardless of the active theme.
• Adds dedicated header color tokens to isolate header styling from page colors.
Diagram

graph TD
  A["Theme source"] --> B{"Dark active?"} -->|No| C["Light palette"] --> E["Page content"]
  B -->|Yes| D["B/W palette"] --> E
  C --> F["White header"]
  D --> F
Loading
High-Level Assessment

The token-based approach is appropriate because it keeps explicit and system-preference dark modes consistent while isolating the header palette. Direct selector overrides were considered but would duplicate component styling and weaken theme maintainability.

Files changed (1) +32 / -19

Bug fix (1) +32 / -19
main.cssRestore monochrome dark mode and isolate header colors +32/-19

Restore monochrome dark mode and isolate header colors

• Replaces tinted dark-mode colors with pure black and white for explicit and system-selected dark themes. Adds dedicated header tokens so the header retains its light background, dark text, muted navigation, and light border in every theme.

assets/main.css

@qodo-free-for-open-source-projects

qodo-free-for-open-source-projects Bot commented Sep 21, 2026 •

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

Grey Divider


Action required

1. Dark-theme header stays black ✓ Resolved 📎 Requirement gap ≡ Correctness
Description
The dark-theme tokens set --base to #000 and --ink and related text colors to #fff, while
.site-header uses var(--base) for its background and inherits the affected text colors. Whenever
dark mode is selected explicitly or through the system preference, the page and header render black
with white text instead of the requested white header with black or dark-grey text.
Code

assets/main.css[R450-451]

+  --surface: #000;
+  --base: #000;
Evidence
The checklist requires a white dark-theme header with black or dark-grey text. The changed
dark-theme tokens set the base background to black and the ink, link, and muted text colors to
white; both the page body and .site-header use var(--base) for their backgrounds, while the
header’s child text uses the affected colors, so the header necessarily becomes black with white
text in explicit and OS-preference dark mode.

Use a White Header Background with Dark Text in Dark Theme
assets/main.css[58-69]
assets/main.css[446-465]
assets/main.css[24-31]
assets/main.css[73-83]
assets/main.css[445-465]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The dark-theme `--base` token is used by both the page body and `.site-header`, while the affected text tokens make header content white; changing `--base` to black therefore makes the header black as well as the rest of the page. The dark-theme design requires a black page background but a white header with black or dark-grey text.
## Fix Focus Areas
- assets/main.css[446-465]
- assets/main.css[58-69]
- assets/main.css[24-31]
- assets/main.css[73-83]
- assets/main.css[445-465]
## Recommended Fix
Introduce dedicated header background and header text theme variables, or otherwise override the dark-theme header colors, while keeping the dark page `--base` set to `#000`. Update `.site-header` to use a `#fff` header background and ensure its text, link, and control colors provide black or dark-grey contrast against the white header in both explicit dark mode and system-preference dark mode.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Tip of the day
💡 Did you know, you can add REVIEW.md to your repo root and Qodo follows it on every PR

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Grey Divider

Qodo Logo

Comment thread assets/main.css
@Siedlerchr Siedlerchr closed this Sep 21, 2026
@Siedlerchr Siedlerchr reopened this Sep 21, 2026
@qodo-free-for-open-source-projects

Copy link
Copy Markdown

Code review by qodo was updated up to the latest commit a6f3f2d

@Siedlerchr
Siedlerchr merged commit 860b581 into main Sep 21, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dark Theme: Switch background colours

1 participant