Flatten the default theme and align its colors with Codex and Bootstrap 5#502
Closed
malberts wants to merge 2 commits into
Closed
Flatten the default theme and align its colors with Codex and Bootstrap 5#502malberts wants to merge 2 commits into
malberts wants to merge 2 commits into
Conversation
malberts
force-pushed
the
flat-and-codex-colours
branch
from
July 18, 2026 11:22
20e552c to
045a3b7
Compare
malberts
marked this pull request as ready for review
July 18, 2026 13:24
malberts
force-pushed
the
flat-and-codex-colours
branch
2 times, most recently
from
July 18, 2026 13:39
8266308 to
79dc798
Compare
malberts
marked this pull request as draft
July 18, 2026 13:44
The default theme no longer enables Bootstrap's shadows and gradients, so buttons, dropdowns, cards and the navbar render flat. Bootstrap defaults both $enable-shadows and $enable-gradients to false; Chameleon had overridden them to true since 5.x, giving the pre-Bootstrap-5 skeuomorphic look. Going flat restores Bootstrap's own default. The accent colors are aligned with MediaWiki's Codex design tokens: primary and link use color-progressive (#36c), danger uses color-destructive (#d73333), and success uses color-success (#177860). Because the skin renders Codex and OOUI widgets inline (Special:Preferences, Special:Block, the RecentChanges filters, etc.), matching these makes the skin's own buttons and links share one color with those widgets instead of a separate Bootstrap blue. Links now follow the primary color instead of the previous separate cobalt blue. Heading sizes are deliberately kept at Chameleon's existing scale rather than taken to Bootstrap's larger defaults. The colors are static values for now; referencing the Codex CSS custom properties directly, so they track at runtime and in dark mode (#449), is a possible follow-up. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
$pink, $cyan and $dark still carried their Bootstrap 4 values in the default theme. This brings them to Bootstrap 5.3: $pink #e83e8c to #d63384, $cyan #17a2b8 to #0dcaf0 (which also updates $info), and $dark $gray-800 to $gray-900 (which drives .btn-dark/.bg-dark and --bs-dark). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
malberts
force-pushed
the
flat-and-codex-colours
branch
from
July 18, 2026 13:50
79dc798 to
8fdd335
Compare
Contributor
Author
|
Closing in favor of #503. The color changes here were exploratory. The decision (see #503) is to keep the
|
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.
The default theme no longer enables Bootstrap's shadows and gradients, so buttons, dropdowns, cards and the navbar render flat. Bootstrap defaults both
$enable-shadowsand$enable-gradientstofalse; Chameleon had overridden them totruesince 5.x, giving the pre-Bootstrap-5 skeuomorphic look. Going flat restores Bootstrap's own default.The accent colors are aligned with MediaWiki's Codex design tokens: primary and link use
color-progressive(#36c), danger usescolor-destructive(#d73333), and success usescolor-success(#177860). Because the skin renders Codex and OOUI widgets inline (Special:Preferences, Special:Block, the RecentChanges filters, etc.), matching these makes the skin's own buttons and links share one color with those widgets instead of a separate Bootstrap blue. Links now follow the primary color instead of the previous separate cobalt blue.The default theme's remaining Bootstrap 4 palette values are also updated to Bootstrap 5.3:
$pink,$cyan(which also drives$info), and$dark. These were leftovers from the theme's Bootstrap-4-era copy of Bootstrap's variables that had kept their Bootstrap 4 values through the upgrade.Heading sizes are deliberately kept at Chameleon's existing scale rather than taken to Bootstrap's larger defaults.
The colors are static values for now; referencing the Codex CSS custom properties directly, so they track at runtime and in dark mode (#449), is a possible follow-up.
Screenshots (UI, Playwright)
Special:BootstrapExamples. Before has the Bootstrap 4 palette with shadows and gradients and cobalt links; after is flat, with Codex-aligned accents and links on the primary blue.