Theming: Add light/dark theming to the editor shell#48
Merged
Conversation
Introduces Cortext's two-surface theming model. Shell themes change the workspace chrome via a bounded token contract (colors, typography, spacing); content themes keep the full WordPress block-theme API for published pages. Phase 1 scope: - Token contract v1 declared in src/styles/_tokens.scss and mirrored in Cortext\Theming\Tokens for the Gutenberg iframe (injected into editor_settings['styles']) and the public frontend (wp_head). - Three-way color-scheme toggle (Light / Dark / Match system) via useColorScheme hook, persisted in localStorage. Dark mode is chrome-only: canvas stays light because blocks and pickers are authored for light backgrounds. - Pre-mount bootstrap script stamps data-theme on #cortext-root before React mounts to avoid a flash. - Opt-in site header/footer patterns reference tokens via inline styles. - Docs: docs/theming.md covers the full design and phased roadmap; vision.md and architecture.md cross-link it.
- Canvas column now follows the shell light/dark theme via a dark override on --cortext-color-canvas. The iframe interior is the active block theme's domain and stays untouched; the iframe and frontend token emitters keep emitting light values. - Sidebar @wordpress/components buttons get dark-mode tints (color, icon fill, pressed state). Scoped to .cortext-sidebar so the canvas chrome and inspector stay light, since those components are authored for light backgrounds. - useColorScheme tracks the resolved scheme in state instead of recomputing it on every render, so consumers see the live value when matchMedia fires. - Docs and Tokens.php docblocks updated to disambiguate the shell canvas column (chrome) from the iframe interior (theme's domain).
These got dropped by the auto-merge while rebasing onto main. The sidebar styles inherited from main use $gray-700, $grid-unit-15, and $grid-unit-05, which come from @wordpress/base-styles/colors and /variables.
Public output is the active block theme's domain. The wp_head token overlay and the cortext/header + cortext/footer patterns contradicted that: any Cortext install pushed CSS variables onto every public page and shipped patterns styled with those variables. That's a publishing theme by another name, even if we never called it one. Pulling both keeps the contract honest: shell tokens only reach the admin shell and the Gutenberg iframe, never the public site. If we ever want a Cortext-flavored public surface, that becomes a separate companion theme story, not a side effect of installing the plugin. What's gone: - patterns/cortext-header.php, patterns/cortext-footer.php - includes/Theming/Patterns.php (and its boot in Plugin.php) - Tokens::print_frontend_css and ::get_frontend_inline_css - Tokens::register and the wp_head action - "Frontend patterns" section in docs/theming.md - "three emitters" wording in docs/architecture.md
With the header/footer patterns gone, nothing inside the Gutenberg iframe references --cortext-* anymore. The injection at Screen.php was leftover infrastructure for those patterns. Pulling it (and the Tokens class) keeps the contract honest: tokens live in _tokens.scss, period. The shell consumes them; the iframe is the active block theme's domain; the public frontend is the theme's domain too. When Knowledgebase mode arrives and the iframe actually needs Cortext tokens, this comes back with a real consumer attached.
680310e to
bf7b25d
Compare
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
1 participant
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
Closes #158
Adds light/dark theming to the Cortext shell, with a toggle in the sidebar.
The shell now uses Cortext tokens instead of raw WordPress/Gutenberg colors. The theme choice is saved in
localStorage, and a small bootstrap script applies it before React mounts so dark mode does not flash light on reload.The editor iframe and public frontend still follow the active block theme. Collection tables stay on a light canvas for now because DataViews still assumes a light admin surface.
Testing
Screen recording
Grabacion.de.pantalla.2026-05-04.a.las.13.12.03.mov