Fix dark mode rendering for tables, form inputs, and notices

- Override WooCommerce's .input-text background (specificity 0,3,1) with
  [data-bs-theme="dark"] selector for text inputs and textareas
- Remove table-light from <thead> in cart, review-order, orders, and
  payment-methods templates (forces white in dark mode)
- Add .alert.woocommerce-* compound selectors for notice overrides
  outside .woocommerce wrapper ancestry
- Suppress focus ring on programmatically focused notices
  (woocommerce.js focus_populate_live_region adds tabindex + focus)
- Wrap order-details product table in card matching thank-you page style
- Fix thank-you alert icon/text line wrap with d-flex align-items-center
- Bump version to 0.1.2

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

CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.1.2] - 2026-02-28
+
+### Fixed
+
+- Dark mode: text inputs and textareas showing white background due to WooCommerce's `.woocommerce form .form-row .input-text` (specificity `0,3,1`) overriding theme's checkout form rules with `var(--wc-form-color-background, #fff)` fallback
+- Dark mode: `table-light` class on `<thead>` forcing white table headers in cart, checkout review, orders, and payment methods pages
+- Dark mode: WooCommerce notice focus ring appearing white when `focus_populate_live_region()` JS programmatically focuses alerts for screen reader accessibility
+- WooCommerce notice overrides not matching alerts rendered by Twig templates (added `.alert.woocommerce-*` compound selectors alongside `.woocommerce .woocommerce-*` descendant selectors)
+- Order details table on thank-you page not wrapped in a card like other sections
+- Thank-you page success message line-wrapping after icon due to block-level `<p>` inside inline alert context
+
+## [0.1.1] - 2026-02-28
+
+### Fixed
+
+- Dark mode: native `<select>` elements showing white background due to WooCommerce's `--wc-form-color-background` falling back to `#fff`
+- Dark mode: SelectWoo/Select2 dropdowns (country/state pickers) rendering with hardcoded `#fff` backgrounds, text colors, and borders
+- Dark mode: checkout form focus ring color for inputs, textareas, and selects
+- WooCommerce notice borders not matching Bootstrap alert styles due to insufficient CSS specificity (bumped to `.woocommerce .woocommerce-*` at `0,2,0`)
+- WooCommerce notice `border-top: 3px solid` and `background-color: #f6f5f8` overriding Bootstrap alert colors
+- Double icons on WooCommerce notices (WooCommerce icon font `::before` conflicting with Bootstrap Icons)
+- Product card images overlapping top rounded corners on catalog page (added `overflow-hidden` to card)
+
 ## [0.1.0] - 2026-02-28
 
 ### Added

CLAUDE.md

@@ -228,6 +228,12 @@ Recurring bugs and non-obvious behaviours discovered across sessions. **Read thi
 - `overflow: visible !important` on `.wp-block-navigation__container` is essential for dropdowns inside block theme navigation.
 - **WooCommerce `shop_table` borders conflict with Bootstrap `.table`** -- reset with `.woocommerce table.shop_table { border: 0 }` and cell `border-left/right: 0`.
 - **WooCommerce gallery JS requires modifier classes** -- `--with-images`, `--without-images`, `--columns-N` on `.woocommerce-product-gallery` + `style="opacity: 0"` for fade-in. Without these, zoom and photoswipe won't initialize.
+- **WooCommerce dark mode select backgrounds** -- `woocommerce.css` sets `select { background-color: var(--wc-form-color-background, #fff) }`. The custom property is never defined for dark mode, so it falls back to `#fff`. Override with `[data-bs-theme="dark"] .woocommerce select`.
+- **Select2/SelectWoo dark mode** -- `select2.css` hardcodes `#fff` on selection containers and dropdowns. Needs overrides for `.select2-selection`, `.select2-dropdown`, `.select2-search__field`, and highlighted options.
+- **WooCommerce notice CSS specificity** -- Uses `border-top: 3px solid`, `background-color: #f6f5f8`, and icon font `::before` at specificity `0,1,0`. Must use `.woocommerce .woocommerce-*` AND `.alert.woocommerce-*` (both specificity `0,2,0`) to cover notices both inside `.woocommerce` wrappers and rendered directly by Twig templates.
+- **WooCommerce notice focus ring** -- `woocommerce.js:focus_populate_live_region()` adds `tabindex="-1"` and calls `.focus()` on the first `.woocommerce-message[role="alert"]` after 500ms for screen reader announcement. The default browser focus ring appears white in dark mode. Suppress with `outline: 0; box-shadow: none` since the focus is non-interactive.
+- **WooCommerce form input specificity** -- `.woocommerce form .form-row .input-text` (specificity `0,3,1`) sets `background-color: var(--wc-form-color-background, #fff)`. This beats theme checkout rules at `0,2,1`. Needs `[data-bs-theme="dark"]` override at `0,4,0`.
+- **Bootstrap `table-light` breaks dark mode** -- Forces a light background on `<thead>` regardless of `data-bs-theme`. Remove it and let Bootstrap's default table styling handle theming.
 - **WooCommerce float layout fights Bootstrap grid** -- `div.product div.images/summary` have `float:left/right; width:48%` in `woocommerce-layout.css`. Override with `float: none; width: 100%`.
 - **Bootstrap `g-*` gutters add negative top margin** -- `g-4` sets both `--bs-gutter-x` and `--bs-gutter-y`; the `.row` gets `margin-top: calc(-1 * var(--bs-gutter-y))` pulling it upward. Use `gx-*` for horizontal-only gutters when vertical gap isn't desired.
 
@@ -321,7 +327,7 @@ The child theme inherits from `wp-bootstrap` via WordPress `Template: wp-bootstr
 
 ## Version History
 
-Current version: **v0.1.0**
+Current version: **v0.1.2**
 
 ## Session History
 
@@ -387,3 +393,40 @@ Current version: **v0.1.0**
 **Files changed (1):**
 
 - `CHANGELOG.md` — Added `[0.1.0]` section documenting all features and fixes between v0.0.1 and v0.1.0
+
+### 2026-02-28 — v0.1.1 Dark Mode & Notice CSS Bugfixes
+
+**Scope:** Fixed dark mode select backgrounds, WooCommerce notice styling conflicts, and product card image overflow.
+
+**Files changed (2):**
+
+- `assets/css/wc-bootstrap.css` — Dark mode overrides for native `<select>` and Select2/SelectWoo widgets; bumped notice selectors to `.woocommerce .woocommerce-*` (specificity `0,2,0`) to beat `woocommerce.css`; suppressed WooCommerce icon font `::before` on notices; added checkout form focus color for dark mode
+- `templates/content-product.html.twig` — Added `overflow-hidden` to product card `<article>` for border-radius clipping
+
+**Key learnings:**
+
+- WooCommerce CSS sets `select { background-color: var(--wc-form-color-background, #fff) }` — the custom property is never defined for dark mode, so it falls back to white. Override with `[data-bs-theme="dark"] .woocommerce select`.
+- Select2/SelectWoo hardcodes `#fff` backgrounds in `select2.css` — needs comprehensive overrides for selection containers, dropdowns, search fields, and highlighted options.
+- WooCommerce notice CSS uses `border-top: 3px solid`, `background-color: #f6f5f8`, and WooCommerce icon font `::before` at specificity `0,1,0`. Single-class overrides don't win — must use `.woocommerce .woocommerce-*` (specificity `0,2,0`) and explicitly reset `border-top`.
+- Never set `background-image` without `background-repeat: no-repeat` / `background-size` / `background-position` — SVGs will tile.
+
+### 2026-02-28 — v0.1.2 Dark Mode Deep Fixes (Tables, Inputs, Notices)
+
+**Scope:** Fixed dark mode rendering issues across checkout, thank-you, cart, and account pages — white table headers, white form inputs, notice focus rings, and missing card wrappers.
+
+**Files changed (7):**
+
+- `assets/css/wc-bootstrap.css` — Added `[data-bs-theme="dark"]` override for `.input-text` and `textarea` (WooCommerce specificity `0,3,1` beats theme at `0,2,1`); added `.alert.woocommerce-*` compound selectors for notice overrides outside `.woocommerce` wrapper; added focus ring suppression for programmatically focused notices
+- `templates/order/order-details.html.twig` — Wrapped product table in `card shadow-sm` with `card-header`; removed `table-light` from `<thead>`
+- `templates/checkout/thankyou.html.twig` — Added `d-flex align-items-center` to success alerts to fix icon/text line wrap
+- `templates/checkout/review-order.html.twig` — Removed `table-light` from `<thead>`
+- `templates/cart/cart.html.twig` — Removed `table-light` from `<thead>`
+- `templates/myaccount/orders.html.twig` — Removed `table-light` from `<thead>`
+- `templates/myaccount/payment-methods.html.twig` — Removed `table-light` from `<thead>`
+
+**Key findings:**
+
+- WooCommerce's `.woocommerce form .form-row .input-text` at specificity `0,3,1` sets `background-color: var(--wc-form-color-background, #fff)` which beats theme rules. The `textarea` generated by `woocommerce_form_field()` has class `input-text`, so it matches this rule. Needs `[data-bs-theme="dark"]` override at `0,4,0`.
+- WooCommerce's `focus_populate_live_region()` in `woocommerce.js` adds `tabindex="-1"` and calls `.focus()` on `.woocommerce-message[role="alert"]` after 500ms for screen reader accessibility. The default browser focus ring appears white in dark mode.
+- Notice overrides using `.woocommerce .woocommerce-*` descendant selectors don't match notices rendered by Twig templates where `.alert` and `.woocommerce-message` are on the same element without a `.woocommerce` wrapper ancestor. Both `.woocommerce .woocommerce-*` and `.alert.woocommerce-*` patterns needed.
+- Bootstrap's `table-light` class forces a light background on `<thead>` regardless of dark mode. Remove it entirely — let the card-header or default table styling handle visual separation.

README.md

@@ -141,8 +141,8 @@ for po in languages/wc-bootstrap-*.po; do msgfmt -o "${po%.po}.mo" "$po"; done
 Releases are automated via Gitea Actions. Push a tag matching `vX.X.X` to trigger a release build.
 
 ```bash
-git tag -a v0.1.0 -m "Version 0.1.0 - Initial release"
-git push origin v0.1.0
+git tag -a v0.1.2 -m "Version 0.1.2 - Bugfix release"
+git push origin v0.1.2
 ```
 
 ## License

assets/css/wc-bootstrap.css

@@ -42,29 +42,43 @@
    when notices are rendered outside our Twig templates.
    ========================================================================== */
 
-.woocommerce-info,
-.woocommerce-message,
-.woocommerce-error {
+/* Override woocommerce.css which sets border-top: 3px solid, background-color:
+   #f6f5f8, and a WooCommerce icon font ::before on notice classes.
+   Two selector patterns at specificity 0,2,0:
+     - .woocommerce .woocommerce-* — notices inside a .woocommerce wrapper
+     - .alert.woocommerce-*       — notices rendered by our Twig templates */
+.woocommerce .woocommerce-info,
+.woocommerce .woocommerce-message,
+.woocommerce .woocommerce-error,
+.alert.woocommerce-info,
+.alert.woocommerce-message,
+.alert.woocommerce-error {
     position: relative;
     padding: 1rem 3rem 1rem 1rem;
-    margin-bottom: 1rem;
-    border: 1px solid transparent;
+    margin: 0 0 1rem;
+    border: var(--bs-border-width) solid transparent;
+    border-top: var(--bs-border-width) solid transparent;
     border-radius: var(--bs-border-radius);
+    background-color: transparent;
+    background-image: none;
 }
 
-.woocommerce-info {
+.woocommerce .woocommerce-info,
+.alert.woocommerce-info {
     color: var(--bs-info-text-emphasis);
     background-color: var(--bs-info-bg-subtle);
     border-color: var(--bs-info-border-subtle);
 }
 
-.woocommerce-message {
+.woocommerce .woocommerce-message,
+.alert.woocommerce-message {
     color: var(--bs-success-text-emphasis);
     background-color: var(--bs-success-bg-subtle);
     border-color: var(--bs-success-border-subtle);
 }
 
-.woocommerce-error {
+.woocommerce .woocommerce-error,
+.alert.woocommerce-error {
     color: var(--bs-danger-text-emphasis);
     background-color: var(--bs-danger-bg-subtle);
     border-color: var(--bs-danger-border-subtle);
@@ -72,6 +86,27 @@
     padding-left: 1rem;
 }
 
+/* WooCommerce JS (woocommerce.js:focus_populate_live_region) adds tabindex="-1"
+   and calls .focus() on notices for screen reader accessibility. The default
+   browser focus ring appears white in dark mode — suppress it since these are
+   non-interactive elements (the focus is only for screen reader announcement). */
+.alert.woocommerce-info:focus,
+.alert.woocommerce-message:focus,
+.alert.woocommerce-error:focus {
+    outline: 0;
+    box-shadow: none;
+}
+
+/* Suppress WooCommerce icon font ::before — our templates use Bootstrap Icons */
+.woocommerce .woocommerce-info::before,
+.woocommerce .woocommerce-message::before,
+.woocommerce .woocommerce-error::before,
+.alert.woocommerce-info::before,
+.alert.woocommerce-message::before,
+.alert.woocommerce-error::before {
+    display: none;
+}
+
 /* ==========================================================================
    Quantity Input
    Sizing for the Bootstrap input-group quantity widget.
@@ -381,10 +416,68 @@
    ========================================================================== */
 
 /* Bootstrap 5 dark mode uses data-bs-theme="dark" attribute on <html> */
-[data-bs-theme="dark"] {
-    /* Checkout form focus color for dark mode */
+
+/* Native <select> elements — woocommerce.css sets:
+     select { background-color: var(--wc-form-color-background, #fff) }
+   The custom property is never defined for dark mode, so it falls back to #fff. */
+[data-bs-theme="dark"] .woocommerce select,
+[data-bs-theme="dark"] .wc-block-checkout select {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    border-color: var(--bs-border-color);
 }
 
+/* Text inputs & textareas — same issue as <select>: woocommerce.css sets
+     .form-row .input-text { background-color: var(--wc-form-color-background, #fff) }
+   with higher specificity than the theme's checkout form rules. */
+[data-bs-theme="dark"] .woocommerce .form-row .input-text,
+[data-bs-theme="dark"] .woocommerce .form-row textarea {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    border-color: var(--bs-border-color);
+}
+
+/* SelectWoo / Select2 — select2.css hardcodes #fff backgrounds on selection
+   containers and dropdowns. Override to use Bootstrap's dark mode variables. */
+[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
+[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    border-color: var(--bs-border-color);
+}
+
+[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: var(--bs-body-color);
+}
+
+[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
+    border-color: var(--bs-secondary-color) transparent transparent transparent;
+}
+
+[data-bs-theme="dark"] .select2-dropdown {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    border-color: var(--bs-border-color);
+}
+
+[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
+    background-color: var(--bs-tertiary-bg);
+    color: var(--bs-body-color);
+    border-color: var(--bs-border-color);
+}
+
+[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true],
+[data-bs-theme="dark"] .select2-container--default .select2-results__option[data-selected=true] {
+    background-color: var(--bs-tertiary-bg);
+}
+
+[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
+[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[data-selected] {
+    background-color: var(--bs-primary);
+    color: #fff;
+}
+
+/* Checkout form focus color for dark mode */
 [data-bs-theme="dark"] .woocommerce-checkout .form-row input.input-text:focus,
 [data-bs-theme="dark"] .woocommerce-checkout .form-row textarea:focus,
 [data-bs-theme="dark"] .woocommerce-checkout .form-row select:focus {

style.css

@@ -7,7 +7,7 @@ Description: A Bootstrap 5 child theme for WP Bootstrap that overrides all WooCo
 Requires at least: 6.7
 Tested up to: 6.7
 Requires PHP: 8.3
-Version: 0.1.0
+Version: 0.1.2
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Template: wp-bootstrap

templates/cart/cart.html.twig

@@ -36,7 +36,7 @@
 
             <div class="table-responsive">
                 <table class="table align-middle shop_table shop_table_responsive cart woocommerce-cart-form__contents">
-                    <thead class="table-light">
+                    <thead>
                         <tr>
                             <th class="product-thumbnail" scope="col" style="width: 80px;">
                                 <span class="visually-hidden">{{ __('Thumbnail') }}</span>

templates/checkout/review-order.html.twig

@@ -19,7 +19,7 @@
 <div class="card shadow-sm woocommerce-checkout-review-order-table">
     <div class="card-body p-0">
         <table class="table table-sm mb-0 shop_table woocommerce-checkout-review-order-table">
-            <thead class="table-light">
+            <thead>
                 <tr>
                     <th class="product-name" scope="col">{{ __('Product') }}</th>
                     <th class="product-total text-end" scope="col">{{ __('Subtotal') }}</th>

templates/checkout/thankyou.html.twig

@@ -27,7 +27,7 @@
             </a>
         </p>
     {% else %}
-        <div class="alert alert-success mb-4" role="alert">
+        <div class="alert alert-success d-flex align-items-center mb-4" role="alert">
             <i class="bi bi-check-circle me-2" aria-hidden="true"></i>
             {% include 'checkout/order-received.html.twig' with { order: order } %}
         </div>
@@ -68,7 +68,7 @@
     {{ do_action('woocommerce_thankyou_' ~ order.get_payment_method(), order.get_id()) }}
     {{ do_action('woocommerce_thankyou', order.get_id()) }}
 {% else %}
-    <div class="alert alert-success mb-4" role="alert">
+    <div class="alert alert-success d-flex align-items-center mb-4" role="alert">
         <i class="bi bi-check-circle me-2" aria-hidden="true"></i>
         {% include 'checkout/order-received.html.twig' %}
     </div>

templates/content-product.html.twig

@@ -21,7 +21,7 @@
  #}
 
 <div class="col">
-    <article class="card h-100 shadow-sm product">
+    <article class="card h-100 shadow-sm overflow-hidden product">
         {{ do_action('woocommerce_before_shop_loop_item') }}
 
         {# Product image with sale badge overlay #}

templates/myaccount/orders.html.twig

@@ -21,7 +21,7 @@
 {% if has_orders %}
     <div class="table-responsive">
         <table class="woocommerce-orders-table table table-hover align-middle mb-4">
-            <thead class="table-light">
+            <thead>
                 <tr>
                     {% for column_id, column_name in wc_get_account_orders_columns() %}
                         <th scope="col">{{ column_name|esc_html }}</th>

templates/myaccount/payment-methods.html.twig

@@ -17,7 +17,7 @@
 {% if has_methods %}
     <div class="table-responsive">
         <table class="table table-hover align-middle mb-4">
-            <thead class="table-light">
+            <thead>
                 <tr>
                     {% for column_id, column_name in wc_get_account_payment_methods_columns() %}
                         <th>{{ column_name|esc_html }}</th>

templates/order/order-details.html.twig

@@ -31,11 +31,13 @@
     <section class="woocommerce-order-details">
         {{ do_action('woocommerce_order_details_before_order_table', order) }}
 
-        <h2 class="h5 mb-3">{{ __('Order details') }}</h2>
-
+        <div class="card shadow-sm mb-4">
+            <div class="card-header">
+                <h2 class="h5 mb-0">{{ __('Order details') }}</h2>
+            </div>
             <div class="table-responsive">
                 <table class="table table-hover align-middle mb-0">
-                <thead class="table-light">
+                    <thead>
                         <tr>
                             <th>{{ __('Product') }}</th>
                             <th class="text-end">{{ __('Total') }}</th>
@@ -77,6 +79,7 @@
                     </tfoot>
                 </table>
             </div>
+        </div>
 
         {{ do_action('woocommerce_order_details_after_order_table', order) }}
     </section>