Document the Boost theme colour modes - #1684
Open
junpataleta wants to merge 1 commit into
Open
Conversation
Adds a Colour modes developer guide covering how Boost renders a mode with the Bootstrap 5.3 colour modes API, which custom properties and design system tokens follow it, how to audit a plugin's styles for hardcoded colours, and how to test in both modes. Also covers icons, editor content, contrast targets, and what a theme inheriting from Boost needs to know. Notes the feature on the 5.3 developer update page, documents the new Behat --colourmode option on the running tests page, and cross-links from the styles.css plugin file, theme styles, and developer guides pages. See MDL-68037. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
✅ Deploy Preview for moodledevdocs ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
junpataleta
added
the
blocked-by-tracker
Contributor
There was a problem hiding this comment.
Pull request overview
Adds developer documentation for Boost’s new light/dark colour modes (Bootstrap 5.3 colour modes API), including guidance for plugin authors on sourcing colours from theme tokens/custom properties, auditing for hardcoded colours, and testing (including Behat support).
Changes:
- Adds a new “Colour modes” developer guide describing how Boost applies modes and how plugins/themes should support them.
- Documents the Behat
--colourmodeoption and links to the new guide. - Cross-links the new guide from the developer update page and relevant CSS/style documentation pages.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| general/development/tools/behat/running.md | Documents --colourmode usage for Behat runs and links to the new guide. |
| docs/guides/colourmodes/index.md | New comprehensive guide explaining Boost colour modes, tokens/properties, auditing, contrast, and testing guidance. |
| docs/guides.md | Adds the new guide to the Developer Guides list. |
| docs/devupdate.md | Notes the new Boost colour modes feature and points readers to the guide. |
| docs/apis/plugintypes/theme/styles.md | Adds a callout linking theme/plugin styling guidance to colour modes. |
| docs/apis/_files/styles-css.mdx | Adds a warning reminding plugin authors to check both colour modes and linking to the guide. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| 1. `-o` or `--optimize-runs` This option will split features with specified tags in all parallel runs, so they are executed first when parallel run gets executed. | ||
| You can view details of all of these using the `--help` flag to `admin/tool/behat/cli/init.php` | ||
|
|
||
| It can also be combined with the `--colourmode` flag, which runs the whole suite in a given colour mode for themes which support them: |
| - `data-bs-theme` holds the mode the page is actually rendered in, either `light` or `dark`. Every Bootstrap colour mode override, and every override in Boost, is scoped to this attribute. | ||
| - `data-colourmode` holds the mode the person chose, which may also be `auto`. It exists because `auto` can only be resolved by the browser. | ||
|
|
||
| The mode is decided server side, so that pages arrive in the right colours rather than flashing white first. Where the choice is `auto`, a small script in the page head resolves it against `prefers-color-scheme` before the page is painted, and keeps listening so that a device which changes its colour scheme while the page is open is followed. |
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.
Adds a Colour modes developer guide covering how Boost renders a mode with the Bootstrap 5.3 colour modes API, which custom properties and design system tokens follow it, how to audit a plugin's styles for hardcoded colours, and how to test in both modes. Also covers icons, editor content, contrast targets, and what a theme inheriting from Boost needs to know.
Notes the feature on the 5.3 developer update page, documents the new Behat --colourmode option on the running tests page, and cross-links from the styles.css plugin file, theme styles, and developer guides pages.
See MDL-68037.