Skip to content

Darkmode fixes#1048

Open
jessehouwing wants to merge 1 commit into
TryGhost:mainfrom
jessehouwing:main
Open

Darkmode fixes#1048
jessehouwing wants to merge 1 commit into
TryGhost:mainfrom
jessehouwing:main

Conversation

@jessehouwing
Copy link
Copy Markdown
Contributor

@jessehouwing jessehouwing commented Apr 15, 2026

This pull request updates the dark mode and auto-color theme styles in screen.css to improve readability and consistency, especially for highlighted text, keyboard elements, strong text, and form inputs. The changes ensure that text and UI elements in dark mode are more visually accessible and consistent with the overall theme.

Dark mode and auto-color theme improvements:

  • Improved the appearance of kbd and mark elements in both html.dark-mode and html.auto-color by adding a subtle border and box-shadow to kbd, and by refining the background and text color of mark for better contrast and readability. [1] [2]
  • Enhanced the visibility of strong text inside figcaption elements by increasing its color contrast in both dark mode and auto-color themes. [1] [2]
  • Updated the color of text in input and textarea elements within .gh-content to use a higher-contrast white shade, improving readability in both dark mode and auto-color. [1] [2]

Note

Low Risk
CSS-only theme tweaks limited to dark/auto-color presentation; low risk beyond potential minor visual regressions in edge cases.

Overview
Improves dark mode and auto-color (prefers dark) styling in screen.css to increase contrast and consistency for common inline elements.

Updates kbd and mark styles (background/foreground plus subtle border/box-shadow), boosts figcaption strong contrast, and adjusts .gh-content input/textarea text color for better readability; rebuilt assets/built/* CSS sourcemaps accordingly.

Reviewed by Cursor Bugbot for commit 4a1a1cb. Bugbot is set up for automated code reviews on this repo. Configure here.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 15, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e3106ba2-694a-45c5-8ace-4c99b6899df3

📥 Commits

Reviewing files that changed from the base of the PR and between acf1cd8 and 4a1a1cb.

⛔ Files ignored due to path filters (3)
  • assets/built/casper.js.map is excluded by !**/*.map
  • assets/built/global.css.map is excluded by !**/*.map
  • assets/built/screen.css.map is excluded by !**/*.map
📒 Files selected for processing (2)
  • assets/built/screen.css
  • assets/css/screen.css

Walkthrough

This PR updates dark-mode styling in the CSS stylesheet. Changes include adding new styling for kbd elements with border-color and box-shadow properties, introducing new dark-mode rules for mark elements with semi-transparent yellow background and light text color, and adding color rules for strong text within figcaption elements in dark mode. Additionally, the text color for form controls (input and textarea) in dark mode is changed from a color-mod-based value to rgba(255, 255, 255, 0.9). The minified built stylesheet is regenerated to reflect these updates.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Darkmode fixes' is related to the changeset but lacks specificity; it refers to the general category of changes without highlighting the main improvements (kbd, mark, figcaption, and input styling).
Description check ✅ Passed The description is directly related to the changeset, providing detailed context about dark mode and auto-color theme improvements with specific references to the affected elements (kbd, mark, figcaption strong, and input/textarea).
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

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

@JohnONolan
Copy link
Copy Markdown
Member

Would you be able to rebase to resolve conflicts and, if possible, share screenshots of before/after the changes?

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.

2 participants