Skip to content

[DO NOT MERGE] Add light and dark color scheme test themes - #266

Draft
MaggieCabrera wants to merge 3 commits into
trunkfrom
codex/color-scheme-test-themes
Draft

[DO NOT MERGE] Add light and dark color scheme test themes#266
MaggieCabrera wants to merge 3 commits into
trunkfrom
codex/color-scheme-test-themes

Conversation

@MaggieCabrera

@MaggieCabrera MaggieCabrera commented Jul 27, 2026

Copy link
Copy Markdown
Collaborator

Warning

DO NOT MERGE. These are throwaway fixtures for WordPress/gutenberg#80698 and its duotone child #80746. Close this PR when testing is complete.

What

Two standalone block themes for manually testing the experimental color-scheme data model. Each declares its opposite scheme inline, mirroring the CSS prefers-color-scheme model — the base palette is the default, and settings.color.light / settings.color.dark override the other scheme.

  • light-theme — light by default (Citrus Daylight), with settings.color.dark supplying the Electric Dusk scheme.
  • dark-theme — dark by default (Midnight Terminal), with settings.color.light supplying the Paper Morning scheme.

Between them they cover:

  • Palette, gradient (signal) and duotone (portrait) presets all flipping together.
  • fixed-accent, a preset deliberately left unoverridden, holding its single value in both schemes.
  • Automatic response to the OS appearance setting, and forced data-scheme values overriding it.
  • Both directions of the model — a light-first theme adding dark, and a dark-first theme adding light.

Each theme ships original test artwork, a 1200×900 screenshot, and a non-persistent System/Light/Dark helper that sets data-scheme on the root element. The shared setup and expected-results matrix lives in COLOR-SCHEME-TESTING.md.

Gutenberg stack

The experimental $schema URLs intentionally follow the head branch of #80746. A Gutenberg build containing both PRs is required; older builds fall back to each theme's base palette.

Validation

  • npm run schema:validate -- light-theme/theme.json dark-theme/theme.json
  • PHP syntax checks for both functions.php and pattern files.
  • JavaScript syntax checks for both scheme helpers.
  • git diff --check.
  • Confirmed both proposed slugs are currently absent from the WordPress.org theme directory.

Manual testing

Follow the setup and expected-results matrix in COLOR-SCHEME-TESTING.md.

Draft while the Gutenberg APIs remain experimental.

@github-actions

Copy link
Copy Markdown

Preview changes

I've detected changes to the following themes in this PR: Dark Theme, Light Theme.

You can preview these changes by following the links below:

I will update this comment with the latest preview links as you push more changes to this PR.

⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

@MaggieCabrera MaggieCabrera changed the title Add light and dark color scheme test themes [DO NOT MERGE] Add light and dark color scheme test themes Jul 27, 2026
Both fixtures now express their opposite scheme with inline
settings.color.light / settings.color.dark, matching the data model in
WordPress/gutenberg#80698, and drop the style-variation fixtures and the
color-scheme-toggle block reference that the stack does not provide.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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.

1 participant