From d6731cca472ede14e00fb1ce921b0c00cd85e5f9 Mon Sep 17 00:00:00 2001 From: magdev Date: Sun, 8 Feb 2026 17:33:12 +0100 Subject: [PATCH] v0.3.2 - Fix dark mode conflicts with WordPress global styles 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 --- CHANGELOG.md | 15 ++ CLAUDE.md | 23 +- PLAN.md | 1 - assets/css/editor-style.css | 12 ++ assets/css/editor-style.css.map | 2 +- assets/css/style.css | 12 ++ assets/css/style.css.map | 2 +- assets/css/style.min.css | 2 +- functions.php | 275 ++++++++++++++++++++++++ package.json | 2 +- src/scss/_custom.scss | 19 +- style.css | 2 +- theme.json | 4 - views/partials/footer-columns.html.twig | 2 +- 14 files changed, 360 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f6e144..118a1d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,21 @@ All notable changes to this project will be documented in this file. +## [0.3.2] - 2026-02-08 + +### Fixed + +- Dark mode body colors overridden by WordPress global styles (`styles.color` in `theme.json` generated conflicting `body` CSS) +- Dark mode styling for plugin-generated form elements (`select`, `input`, `textarea`) that lack Bootstrap classes +- Footer columns template used hardcoded `bg-dark text-light` instead of semantic `bg-body-tertiary` +- Style variation bridge function ran with default palette when no variation was active, causing unnecessary CSS overrides + +### Changed + +- Removed `styles.color` from `theme.json` to prevent WordPress from generating body background/text CSS that conflicts with Bootstrap dark mode +- Added `!important` override in `_custom.scss` for `html[data-bs-theme="dark"] body` to ensure Bootstrap dark mode takes precedence +- Added broad dark mode rules for native form elements in `_custom.scss` + ## [0.3.1] - 2026-02-08 ### Added diff --git a/CLAUDE.md b/CLAUDE.md index 0105236..41edf1e 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -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., `