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., `