Skip to content

Flatten the default theme and align its colors with Codex and Bootstrap 5#502

Closed
malberts wants to merge 2 commits into
masterfrom
flat-and-codex-colours
Closed

Flatten the default theme and align its colors with Codex and Bootstrap 5#502
malberts wants to merge 2 commits into
masterfrom
flat-and-codex-colours

Conversation

@malberts

@malberts malberts commented Jul 18, 2026

Copy link
Copy Markdown
Contributor

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.

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.

Before After
bootstrapexamples-before bootstrapexamples-after

AI-authored with Claude Code, Opus 4.8 (1M context); iterative design direction from @malberts across many rounds; diff not yet human-reviewed; compiled and checked against a local MediaWiki render (before/after on Special:BootstrapExamples), CI green.

@malberts malberts added this to the 6.0.0 milestone Jul 18, 2026
@malberts
malberts force-pushed the flat-and-codex-colours branch from 20e552c to 045a3b7 Compare July 18, 2026 11:22
@malberts malberts changed the title Flatten the default theme and align its colours with Codex Flatten the default theme and align its colours with Codex and Bootstrap 5 Jul 18, 2026
@malberts
malberts marked this pull request as ready for review July 18, 2026 13:24
@malberts
malberts force-pushed the flat-and-codex-colours branch 2 times, most recently from 8266308 to 79dc798 Compare July 18, 2026 13:39
@malberts
malberts marked this pull request as draft July 18, 2026 13:44
malberts and others added 2 commits July 18, 2026 15:50
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
malberts force-pushed the flat-and-codex-colours branch from 79dc798 to 8fdd335 Compare July 18, 2026 13:50
@malberts malberts changed the title Flatten the default theme and align its colours with Codex and Bootstrap 5 Flatten the default theme and align its colors with Codex and Bootstrap 5 Jul 18, 2026
@malberts malberts mentioned this pull request Jul 19, 2026
12 tasks
@malberts

Copy link
Copy Markdown
Contributor Author

Closing in favor of #503.

The color changes here were exploratory. The decision (see #503) is to keep the _light theme unchanged in 6.0 so the release stays non-breaking, and to build a proper Codex-aligned theme as a separate opt-in theme in 6.1. The findings and decisions from this PR carry into that issue.

Closed per discussion with @malberts. Written by Claude Code, Opus 4.8 (1M context).

@malberts malberts closed this Jul 19, 2026
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