magdev/wp-bootstrap
1
Fork 0
Code Issues Pull Requests Actions Releases 24 Activity

v0.3.2 - Fix dark mode conflicts with WordPress global styles
All checks were successful
Create Release Package / PHP Lint (push) Successful in 59s
Details
Create Release Package / Build Release (push) Successful in 1m25s
Details

Browse Source 
Fix dark mode body colors overridden by WordPress theme.json styles.color,
add broad dark mode rules for plugin form elements, fix footer-columns
template, and add style variation bridge function.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Marco Grätsch
2026-02-08 17:33:12 +01:00
parent edf053d7ea
commit d6731cca47
14 changed files with 360 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
CLAUDE.md
View File

@@ -34,7 +34,7 @@ This project is proudly **"vibe-coded"** using Claude.AI - the entire codebase w
**Note for AI Assistants:** Clean this section after the specific features are done or new releases are made. Effective changes are tracked in `CHANGELOG.md`. Do not add completed versions here - document them in the Session History section at the end of this file.
Current version is **v0.3.1** - Style Variations. Next milestone is **v1.0.0 - Release**. See `PLAN.md` for details.
Current version is **v0.3.2** - Dark Mode Bugfix. Next milestone is **v1.0.0 - Release**. See `PLAN.md` for details.
## Technical Stack
@@ -193,6 +193,27 @@ Build steps (in order):
## Session History
### Session 7 — v0.3.2 Dark Mode Bugfix (2026-02-08)
**Completed:** Fixed dark mode rendering conflicts between WordPress global styles and Bootstrap, fixed form element styling in dark mode, bridged style variation colors to Bootstrap CSS custom properties.
**What was built:**
- Style variation bridge function (`wp_bootstrap_variation_colors`) that maps WordPress palette colors to Bootstrap CSS custom properties via `wp_enqueue_scripts`
- Helper functions for color manipulation: `wp_bootstrap_hex_to_rgb()`, `wp_bootstrap_build_surface_css()`, `wp_bootstrap_mix_hex()`, `wp_bootstrap_hex_to_rgb_array()`, `wp_bootstrap_relative_luminance()`
- Detection logic to skip bridge when no variation is active (checks for theme slugs in `custom` palette origin)
- Dark mode body override in `_custom.scss` using `!important` to defeat WordPress global styles specificity
- Broad dark mode rules for all native form elements (`select`, `input`, `textarea`) to catch plugin-generated controls
- Fixed `footer-columns.html.twig` to use semantic `bg-body-tertiary` instead of hardcoded `bg-dark text-light`
**Key learnings:**
- `wp_get_global_settings(['color', 'palette'])` returns keyed sub-arrays (`default`, `theme`, `custom`) but may omit origins; query each origin separately with `wp_get_global_settings(['color', 'palette', 'default'])` etc.
- WordPress `theme.json` `styles.color` generates `body { background-color: var(--wp--preset--color--base) }` directly on `body`, which overrides inherited CSS variables from `html[data-bs-theme="dark"]` -- removing `styles.color` from theme.json is the cleanest fix
- The `wp_global_styles` custom post type stores user-saved variation settings; when empty, no variation has been selected by the user
- CSS variables defined directly on `body` beat inherited values from `html` due to specificity, requiring `!important` on `html[data-bs-theme="dark"] body` to ensure Bootstrap dark mode works
- Plugin-generated form elements (e.g., `<select class="jr-search-form__filter-select">`) lack Bootstrap classes and need explicit dark mode styling via element selectors
### Session 6 — v0.3.1 Style Variations (2026-02-08)
**Completed:** Added 8 new style variations (4 light, 4 dark) to the Design Editor.