Color schemes: per-scheme duotone overrides (prototype, stacked on #80698) - #80746
Draft
MaggieCabrera wants to merge 1 commit into
Draft
Color schemes: per-scheme duotone overrides (prototype, stacked on #80698)#80746MaggieCabrera wants to merge 1 commit into
MaggieCabrera wants to merge 1 commit into
Conversation
This was referenced Jul 27, 2026
MaggieCabrera
force-pushed
the
try/dark-mode-duotone
branch
from
July 27, 2026 20:13
8619be1 to
ac8bece
Compare
MaggieCabrera
added
[Type] Technical Prototype
MaggieCabrera
force-pushed
the
try/dark-mode-duotone
branch
from
July 28, 2026 14:26
ac8bece to
c543763
Compare
Extends the scheme model to duotone, so duotone-filtered images recolor with the scheme instead of staying fixed (a light-tinted duotone left unchanged on a dark layout would otherwise break the design). Unlike palette/gradients, a duotone preset resolves to an injected SVG filter referenced through --wp--preset--duotone--<slug>. A scheme override (settings.color.light.duotone / settings.color.dark.duotone, matched by slug) injects an additional filter (id wp-duotone-<slug>--<scheme>) and redefines that custom property under the scheme gate, so blocks flip automatically. Variant filters are only injected when the base preset is used. Presets only; custom per-block duotones remain a documented limitation. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
MaggieCabrera
force-pushed
the
try/dark-mode-duotone
branch
from
July 28, 2026 15:03
c543763 to
dff3661
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Technical prototype extending the theme.json color-scheme override model to duotone presets, so --wp--preset--duotone--{slug} can switch under the same prefers-color-scheme / data-scheme gates as palette and gradients.
Changes:
- Add
settings.color.dark.duotone/settings.color.light.duotoneto thetheme.jsonschema and reference docs. - Emit per-scheme duotone variant SVG filters (
wp-duotone-{slug}--{scheme}) and gated CSS custom-property overrides when a base preset is used. - Update theme.json documentation to describe duotone overrides in the scheme model.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| schemas/json/theme.json | Adds schema support for `settings.color.(dark |
| lib/class-wp-duotone-gutenberg.php | Generates scheme-variant duotone SVG filters and gated --wp--preset--duotone--* overrides. |
| docs/reference-guides/theme-json-reference/theme-json-living.md | Updates the theme.json reference to include duotone under dark/light overrides. |
| docs/how-to-guides/themes/theme-json-dark-scheme.md | Documents how scheme duotone overrides work and what remains out of scope. |
Comment on lines
+1158
to
+1161
| $scheme_css = self::get_scheme_global_styles_presets(); | ||
| if ( '' !== $scheme_css ) { | ||
| wp_add_inline_style( 'global-styles', $scheme_css ); | ||
| } |
Comment on lines
+810
to
+818
| private static function get_scheme_duotone_overrides() { | ||
| if ( isset( self::$scheme_duotone_overrides ) ) { | ||
| return self::$scheme_duotone_overrides; | ||
| } | ||
|
|
||
| self::$scheme_duotone_overrides = array(); | ||
| $settings = gutenberg_get_global_settings(); | ||
|
|
||
| foreach ( array( 'light', 'dark' ) as $scheme ) { |
Comment on lines
+866
to
+876
| self::$used_svg_filter_data[ $variant_filter_id ] = array( | ||
| 'slug' => $slug . '--' . $scheme, | ||
| 'colors' => $overrides[ $scheme ][ $slug ], | ||
| ); | ||
|
|
||
| // Record the variant so its gated custom-property override is emitted. | ||
| self::$used_scheme_duotone_presets[ $variant_filter_id ] = array( | ||
| 'scheme' => $scheme, | ||
| 'slug' => $slug, | ||
| 'filter' => self::get_filter_url( $variant_filter_id ), | ||
| ); |
This was referenced Jul 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What / Why
Technical prototype for discussion — not ready to merge. Stacked on #80698. Extends the color scheme data model to duotone presets, so filtered images switch with the rest of the palette.
How it works
A scheme override in
settings.color.dark.duotoneorsettings.color.light.duotone:wp-duotone-{slug}--{scheme}when the base preset is used.--wp--preset--duotone--{slug}to that filter inside the sameprefers-color-schemeanddata-schemegates as Dark/light mode support for themes on theme.json #80698.Overrides match by slug. Custom per-block duotones remain fixed across schemes.
Testing
Automated
Manual
Use either theme from WordPress/community-themes#266:
--wp--preset--duotone--portraitpoints to the matching scheme filter.Questions for reviewers
See
docs/how-to-guides/themes/theme-json-dark-scheme.md.