Skip to content

Add comprehensive dark mode implementation guide to README and FAQ#22

Draft
Copilot wants to merge 3 commits intomainfrom
copilot/clarify-dark-mode-usage
Draft

Add comprehensive dark mode implementation guide to README and FAQ#22
Copilot wants to merge 3 commits intomainfrom
copilot/clarify-dark-mode-usage

Conversation

Copy link
Contributor

Copilot AI commented Dec 1, 2025 •
edited
Loading

Users need clear guidance on implementing dark mode styles with the .theme-dark class. The existing documentation only showed one advanced implementation without explaining the fundamentals or alternatives.

Changes

README.md

  • Added "Implementing dark mode styles" section with three progressively advanced methods:
    • Simple CSS: Direct element targeting for basic use cases
    • CSS Variables: Root-level variable overrides (recommended)
    • theme.json integration: WordPress preset color mapping for block themes
  • Added "Adding your CSS" guide listing injection points (child theme, Customizer, etc.)
  • Added Twenty Twenty-Five theme example
  • Corrected technical details: plugin adds .theme-dark to <html> element, not body

readme.txt

  • Added FAQ entry: "Where can I set the colors I want to be used in the dark mode?"
  • Condensed all three implementation methods with code examples
  • Updated installation instructions with actionable guidance
  • Fixed typo: "between between" → "between"

Example

/* CSS Variables approach (recommended) */
:root {
    --background-color: #ffffff;
    --text-color: #000000;
}

.theme-dark {
    --background-color: #1a1a1a;
    --text-color: #ffffff;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}
Original prompt

This section details on the original issue you should resolve

<issue_title>Clarify in readme and plugin repo FAQ exactly how you suggest we use .theme-dark to modify styles</issue_title>
<issue_description>Hi, this seems like the ideal lightweight plugin to add dark mode to the 2025 theme, but I'm struggling to figure out the best way to implement it. I think it might be really obvious to you, but for users, even technical ones like me (I code my block theme by hand and store it all in Git), it's not clear how to best take advantage of the toggle.

I'm eager to hear your answer to this question, but even better would be to integrate it into the FAQ: "Where can I set the colors I want to be used in the dark mode?"

I suspect there's multiple answers, but a few lines describing them and maybe an example, would go a long way.

Thanks for your work on this project!</issue_description>

Comments on the Issue (you are @copilot in this section)

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 2 commits December 1, 2025 16:03
@richtabor
Add comprehensive dark mode styling guide to README and FAQ
fbe31d5 
Co-authored-by: richtabor <1813435+richtabor@users.noreply.github.com>
@richtabor
Fix duplicate word typo in plugin description
6bff14d 
Co-authored-by: richtabor <1813435+richtabor@users.noreply.github.com>
Copilot AI changed the title [WIP] Update README and FAQ for using .theme-dark Add comprehensive dark mode implementation guide to README and FAQ Dec 1, 2025
Copilot AI requested a review from richtabor December 1, 2025 16:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@richtabor richtabor Awaiting requested review from richtabor

Assignees

@richtabor richtabor

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Clarify in readme and plugin repo FAQ exactly how you suggest we use .theme-dark to modify styles

2 participants

@richtabor