v0.3.3 - Fix style variation bridge to read from theme palette origin

WordPress puts active variation colors in the 'theme' palette origin,
not 'custom'. Detection now compares theme origin against base defaults.

Co-Authored-By: Claude <noreply@anthropic.com>

CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.3.3] - 2026-02-08
+
+### Fixed
+
+- Style variation colors not applied to Bootstrap frontend — bridge function checked wrong palette origin (`custom` instead of `theme`)
+- Variation detection now compares `theme` origin against base theme.json defaults instead of looking for slugs in `custom` origin
+
+## [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

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.3** - Style Variation Bridge Fix. Next milestone is **v1.0.0 - Release**. See `PLAN.md` for details.
 
 ## Technical Stack
 
@@ -193,6 +193,28 @@ Build steps (in order):
 
 ## Session History
 
+### Session 7 — v0.3.2/v0.3.3 Dark Mode & Style Variation Bridge (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, fixed variation detection to read from correct palette origin.
+
+**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()`
+- Variation detection comparing `theme` origin palette against hardcoded base defaults (base, contrast, primary)
+- 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:**
+
+- WordPress puts style variation colors in the `theme` palette origin, NOT `custom` -- `wp_get_global_settings(['color', 'palette', 'theme'])` returns the base theme.json merged with the active variation
+- The `custom` palette origin contains user manual edits from the Site Editor, but its data structure may lack expected `slug`/`color` keys
+- To detect an active variation, compare `theme` origin colors against known base theme.json defaults rather than checking for slugs in `custom`
+- 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
+- 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.

PLAN.md

@@ -88,7 +88,6 @@ node_modules/bootstrap/dist/js/ → copyfiles → assets/js/bootstrap.bundle.min
 - [ ] WordPress.org theme review compliance
 - [ ] Comprehensive documentation
 - [ ] Full test coverage
-- [ ] Update `README.md`
 
 ## Bootstrap 5 Integration Strategy
 

assets/css/editor-style.css

@@ -11920,6 +11920,18 @@ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, blockquote, caption, figca
   background: transparent !important;
 }
 
+html[data-bs-theme=dark] body {
+  background-color: var(--bs-body-bg) !important;
+  color: var(--bs-body-color) !important;
+}
+
+[data-bs-theme=dark] select,
+[data-bs-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),
+[data-bs-theme=dark] textarea {
+  background-color: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  border-color: var(--bs-border-color);
+}
 [data-bs-theme=dark] .offcanvas {
   --bs-offcanvas-bg: var(--bs-body-bg);
 }

assets/css/style.css

@@ -11920,6 +11920,18 @@ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, blockquote, caption, figca
   background: transparent !important;
 }
 
+html[data-bs-theme=dark] body {
+  background-color: var(--bs-body-bg) !important;
+  color: var(--bs-body-color) !important;
+}
+
+[data-bs-theme=dark] select,
+[data-bs-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),
+[data-bs-theme=dark] textarea {
+  background-color: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  border-color: var(--bs-border-color);
+}
 [data-bs-theme=dark] .offcanvas {
   --bs-offcanvas-bg: var(--bs-body-bg);
 }

functions.php

@@ -134,6 +134,280 @@ if ( ! function_exists( 'wp_bootstrap_rtl_styles' ) ) :
 endif;
 add_action( 'wp_enqueue_scripts', 'wp_bootstrap_rtl_styles', 20 );
 
+/**
+ * Bridge WordPress style variation colors to Bootstrap CSS custom properties.
+ *
+ * Reads the active color palette (theme.json + variation + user overrides)
+ * and outputs inline CSS for both light and dark modes so the dark-mode toggle
+ * switches between two variation-aware color schemes.
+ *
+ * Theme colors (primary–info) go into :root and apply in both modes.
+ * Surface colors (body-bg, tertiary-bg, etc.) are computed separately for
+ * [data-bs-theme=light] and [data-bs-theme=dark].
+ *
+ * For light palettes: light mode uses base/contrast; dark mode uses dark/light slugs.
+ * For dark palettes:  dark mode uses base/contrast; light mode swaps them.
+ *
+ * @since 0.3.2
+ */
+if ( ! function_exists( 'wp_bootstrap_variation_colors' ) ) :
+    function wp_bootstrap_variation_colors() {
+        // Read the theme origin palette — this contains the base theme.json
+        // colors merged with the active style variation (if any).
+        $theme_palette = wp_get_global_settings( array( 'color', 'palette', 'theme' ) );
+        $colors = array();
+        if ( ! empty( $theme_palette ) && is_array( $theme_palette ) ) {
+            foreach ( $theme_palette as $entry ) {
+                if ( ! empty( $entry['slug'] ) && ! empty( $entry['color'] ) ) {
+                    $colors[ $entry['slug'] ] = $entry['color'];
+                }
+            }
+        }
+
+        // Compare against base theme.json defaults to detect an active variation.
+        // WordPress puts variation colors in the 'theme' origin, not 'custom'.
+        $base_defaults = array(
+            'base'     => '#ffffff',
+            'contrast' => '#212529',
+            'primary'  => '#0d6efd',
+        );
+
+        $is_default = true;
+        foreach ( $base_defaults as $slug => $default_color ) {
+            if ( ! empty( $colors[ $slug ] ) && strtolower( $colors[ $slug ] ) !== $default_color ) {
+                $is_default = false;
+                break;
+            }
+        }
+
+        // No variation active — let Bootstrap's compiled CSS handle both modes.
+        if ( $is_default ) {
+            return;
+        }
+
+        if ( empty( $colors['base'] ) || empty( $colors['contrast'] ) ) {
+            return;
+        }
+
+        // Theme colors apply in both modes via :root.
+        $theme_slugs = array(
+            'primary'   => '--bs-primary',
+            'secondary' => '--bs-secondary',
+            'success'   => '--bs-success',
+            'danger'    => '--bs-danger',
+            'warning'   => '--bs-warning',
+            'info'      => '--bs-info',
+        );
+
+        $root_css = '';
+        foreach ( $theme_slugs as $slug => $var ) {
+            if ( ! empty( $colors[ $slug ] ) ) {
+                $hex = esc_attr( $colors[ $slug ] );
+                $rgb = wp_bootstrap_hex_to_rgb( $colors[ $slug ] );
+                $root_css .= "{$var}:{$hex};";
+                if ( $rgb ) {
+                    $root_css .= "{$var}-rgb:{$rgb};";
+                }
+            }
+        }
+
+        // Link colors from primary (both modes).
+        if ( ! empty( $colors['primary'] ) ) {
+            $primary_rgb = wp_bootstrap_hex_to_rgb( $colors['primary'] );
+            $root_css .= '--bs-link-color:' . esc_attr( $colors['primary'] ) . ';';
+            $root_css .= '--bs-link-color-rgb:' . $primary_rgb . ';';
+            $root_css .= '--bs-link-hover-color:' . esc_attr( $colors['primary'] ) . ';';
+            $root_css .= '--bs-link-hover-color-rgb:' . $primary_rgb . ';';
+        }
+
+        // Determine if this is a dark palette (base luminance < contrast luminance).
+        $is_dark = wp_bootstrap_relative_luminance( $colors['base'] )
+                 < wp_bootstrap_relative_luminance( $colors['contrast'] );
+
+        // Resolve light-mode and dark-mode base colors.
+        if ( $is_dark ) {
+            // Dark palette: dark mode is native, light mode swaps base↔contrast.
+            $light_bg  = $colors['contrast'];
+            $light_fg  = $colors['base'];
+            $dark_bg   = $colors['base'];
+            $dark_fg   = $colors['contrast'];
+        } else {
+            // Light palette: light mode is native, dark mode uses dark/light slugs.
+            $light_bg  = $colors['base'];
+            $light_fg  = $colors['contrast'];
+            $dark_bg   = $colors['dark'] ?? '#212529';
+            $dark_fg   = $colors['light'] ?? '#f8f9fa';
+        }
+
+        // Also set light/dark slug variables for utilities like bg-light, bg-dark.
+        if ( ! empty( $colors['light'] ) ) {
+            $root_css .= '--bs-light:' . esc_attr( $colors['light'] ) . ';';
+            $root_css .= '--bs-light-rgb:' . wp_bootstrap_hex_to_rgb( $colors['light'] ) . ';';
+        }
+        if ( ! empty( $colors['dark'] ) ) {
+            $root_css .= '--bs-dark:' . esc_attr( $colors['dark'] ) . ';';
+            $root_css .= '--bs-dark-rgb:' . wp_bootstrap_hex_to_rgb( $colors['dark'] ) . ';';
+        }
+
+        // Build surface CSS for a given bg/fg pair.
+        $light_css = wp_bootstrap_build_surface_css( $light_bg, $light_fg, false );
+        $dark_css  = wp_bootstrap_build_surface_css( $dark_bg, $dark_fg, true );
+
+        $css = ':root{' . $root_css . '}'
+             . '[data-bs-theme=light]{' . $light_css . '}'
+             . '[data-bs-theme=dark]{' . $dark_css . '}';
+
+        // Attach after the compiled stylesheet so variation values override
+        // Bootstrap's hardcoded dark-mode defaults via source order.
+        wp_add_inline_style( 'wp-bootstrap-style', $css );
+    }
+endif;
+add_action( 'wp_enqueue_scripts', 'wp_bootstrap_variation_colors', 30 );
+
+/**
+ * Build Bootstrap surface CSS variables for a given background/foreground pair.
+ *
+ * Computes body-bg, body-color, tertiary-bg, secondary-bg, secondary-color,
+ * emphasis-color, and border-color — mirroring how Bootstrap derives them.
+ *
+ * @since 0.3.2
+ *
+ * @param string $bg      Background hex color.
+ * @param string $fg      Foreground (text) hex color.
+ * @param bool   $is_dark Whether this is for dark mode.
+ * @return string CSS declarations (no selector).
+ */
+if ( ! function_exists( 'wp_bootstrap_build_surface_css' ) ) :
+    function wp_bootstrap_build_surface_css( $bg, $fg, $is_dark ) {
+        $bg_rgb = wp_bootstrap_hex_to_rgb( $bg );
+        $fg_rgb = wp_bootstrap_hex_to_rgb( $fg );
+
+        $css  = '--bs-body-bg:' . esc_attr( $bg ) . ';';
+        $css .= '--bs-body-bg-rgb:' . $bg_rgb . ';';
+        $css .= '--bs-body-color:' . esc_attr( $fg ) . ';';
+        $css .= '--bs-body-color-rgb:' . $fg_rgb . ';';
+
+        if ( $is_dark ) {
+            $secondary_bg = wp_bootstrap_mix_hex( $fg, $bg, 0.16 );
+            $tertiary_bg  = wp_bootstrap_mix_hex( $fg, $bg, 0.08 );
+            $border_color = wp_bootstrap_mix_hex( $fg, $bg, 0.24 );
+            $emphasis     = '#FFFFFF';
+        } else {
+            $secondary_bg = wp_bootstrap_mix_hex( $fg, $bg, 0.08 );
+            $tertiary_bg  = wp_bootstrap_mix_hex( $fg, $bg, 0.04 );
+            $border_color = wp_bootstrap_mix_hex( $fg, $bg, 0.16 );
+            $emphasis     = '#000000';
+        }
+
+        $css .= '--bs-secondary-color:rgba(' . $fg_rgb . ',0.75);';
+        $css .= '--bs-secondary-bg:' . $secondary_bg . ';';
+        $css .= '--bs-secondary-bg-rgb:' . wp_bootstrap_hex_to_rgb( $secondary_bg ) . ';';
+        $css .= '--bs-tertiary-color:rgba(' . $fg_rgb . ',0.5);';
+        $css .= '--bs-tertiary-bg:' . $tertiary_bg . ';';
+        $css .= '--bs-tertiary-bg-rgb:' . wp_bootstrap_hex_to_rgb( $tertiary_bg ) . ';';
+        $css .= '--bs-emphasis-color:' . $emphasis . ';';
+        $css .= '--bs-emphasis-color-rgb:' . wp_bootstrap_hex_to_rgb( $emphasis ) . ';';
+        $css .= '--bs-border-color:' . $border_color . ';';
+
+        return $css;
+    }
+endif;
+
+/**
+ * Convert a hex color string to an RGB triplet string.
+ *
+ * @since 0.3.2
+ *
+ * @param string $hex Hex color (e.g. "#0d6efd" or "0d6efd").
+ * @return string RGB triplet (e.g. "13,110,253") or empty string on failure.
+ */
+if ( ! function_exists( 'wp_bootstrap_hex_to_rgb' ) ) :
+    function wp_bootstrap_hex_to_rgb( $hex ) {
+        $hex = ltrim( $hex, '#' );
+        if ( strlen( $hex ) === 3 ) {
+            $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
+        }
+        if ( strlen( $hex ) !== 6 ) {
+            return '';
+        }
+        return hexdec( substr( $hex, 0, 2 ) ) . ','
+             . hexdec( substr( $hex, 2, 2 ) ) . ','
+             . hexdec( substr( $hex, 4, 2 ) );
+    }
+endif;
+
+/**
+ * Mix two hex colors by a given weight.
+ *
+ * @since 0.3.2
+ *
+ * @param string $color1 Hex color to mix in.
+ * @param string $color2 Base hex color.
+ * @param float  $weight Weight of color1 (0.0 to 1.0).
+ * @return string Resulting hex color.
+ */
+if ( ! function_exists( 'wp_bootstrap_mix_hex' ) ) :
+    function wp_bootstrap_mix_hex( $color1, $color2, $weight ) {
+        $c1 = wp_bootstrap_hex_to_rgb_array( $color1 );
+        $c2 = wp_bootstrap_hex_to_rgb_array( $color2 );
+        if ( ! $c1 || ! $c2 ) {
+            return $color2;
+        }
+        $r = (int) round( $c1[0] * $weight + $c2[0] * ( 1 - $weight ) );
+        $g = (int) round( $c1[1] * $weight + $c2[1] * ( 1 - $weight ) );
+        $b = (int) round( $c1[2] * $weight + $c2[2] * ( 1 - $weight ) );
+        return sprintf( '#%02x%02x%02x', max( 0, min( 255, $r ) ), max( 0, min( 255, $g ) ), max( 0, min( 255, $b ) ) );
+    }
+endif;
+
+/**
+ * Convert a hex color to an array of [r, g, b] integers.
+ *
+ * @since 0.3.2
+ *
+ * @param string $hex Hex color.
+ * @return array|false Array of [r, g, b] or false on failure.
+ */
+if ( ! function_exists( 'wp_bootstrap_hex_to_rgb_array' ) ) :
+    function wp_bootstrap_hex_to_rgb_array( $hex ) {
+        $hex = ltrim( $hex, '#' );
+        if ( strlen( $hex ) === 3 ) {
+            $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
+        }
+        if ( strlen( $hex ) !== 6 ) {
+            return false;
+        }
+        return array(
+            hexdec( substr( $hex, 0, 2 ) ),
+            hexdec( substr( $hex, 2, 2 ) ),
+            hexdec( substr( $hex, 4, 2 ) ),
+        );
+    }
+endif;
+
+/**
+ * Compute relative luminance of a hex color (0.0 = black, 1.0 = white).
+ *
+ * @since 0.3.2
+ *
+ * @param string $hex Hex color.
+ * @return float Relative luminance.
+ */
+if ( ! function_exists( 'wp_bootstrap_relative_luminance' ) ) :
+    function wp_bootstrap_relative_luminance( $hex ) {
+        $rgb = wp_bootstrap_hex_to_rgb_array( $hex );
+        if ( ! $rgb ) {
+            return 0.0;
+        }
+        $channels = array();
+        foreach ( $rgb as $val ) {
+            $val /= 255;
+            $channels[] = ( $val <= 0.03928 ) ? $val / 12.92 : pow( ( $val + 0.055 ) / 1.055, 2.4 );
+        }
+        return 0.2126 * $channels[0] + 0.7152 * $channels[1] + 0.0722 * $channels[2];
+    }
+endif;
+
 /**
  * Enqueue Bootstrap JS in the block editor for interactive previews.
  *

package.json

@@ -1,6 +1,6 @@
 {
     "name": "wp-bootstrap",
-    "version": "0.3.1",
+    "version": "0.3.3",
     "description": "WordPress Theme built with Bootstrap 5",
     "author": "Marco Graetsch <magdev3.0@gmail.com>",
     "license": "GPL-2.0-or-later",

src/scss/_custom.scss

@@ -36,8 +36,25 @@
     }
 }
 
-// Offcanvas navigation dark mode compatibility
+// Force Bootstrap dark mode body colors past any WordPress global styles.
+// WordPress may output body { background-color: ...; color: ...; } via
+// global-styles that overrides Bootstrap's variable-based body styling.
+html[data-bs-theme="dark"] body {
+    background-color: var(--bs-body-bg) !important;
+    color: var(--bs-body-color) !important;
+}
+
+// Dark mode for all form elements — catches plugin-generated controls
+// that lack Bootstrap's .form-select / .form-control classes.
 [data-bs-theme="dark"] {
+    select,
+    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
+    textarea {
+        background-color: var(--bs-body-bg);
+        color: var(--bs-body-color);
+        border-color: var(--bs-border-color);
+    }
+
     .offcanvas {
         --bs-offcanvas-bg: var(--bs-body-bg);
     }

style.css

@@ -7,7 +7,7 @@ Description: A modern WordPress Block Theme built from scratch with Bootstrap 5.
 Requires at least: 6.7
 Tested up to: 6.7
 Requires PHP: 8.3
-Version: 0.3.1
+Version: 0.3.3
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: wp-bootstrap

theme.json

@@ -271,10 +271,6 @@
         "useRootPaddingAwareAlignments": true
     },
     "styles": {
-        "color": {
-            "background": "var:preset|color|base",
-            "text": "var:preset|color|contrast"
-        },
         "spacing": {
             "blockGap": "1.5rem",
             "padding": {

views/partials/footer-columns.html.twig

@@ -1,4 +1,4 @@
-<footer class="bg-dark text-light mt-auto">
+<footer class="bg-body-tertiary mt-auto">
     <div class="container py-5">
         <div class="row">
             <div class="col-lg-4 mb-4 mb-lg-0">