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,17 @@
 
 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

CLAUDE.md

@@ -230,7 +230,10 @@ Recurring bugs and non-obvious behaviours discovered across sessions. **Read thi
 - **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-*` (specificity `0,2,0`) and explicitly reset `border-top` to override.
+- **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.
 
@@ -324,7 +327,7 @@ The child theme inherits from `wp-bootstrap` via WordPress `Template: wp-bootstr
 
 ## Version History
 
-Current version: **v0.1.1**
+Current version: **v0.1.2**
 
 ## Session History
 
@@ -406,3 +409,24 @@ Current version: **v0.1.1**
 - 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.1 -m "Version 0.1.1 - Bugfix release"
-git push origin v0.1.1
+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,12 +42,17 @@
    when notices are rendered outside our Twig templates.
    ========================================================================== */
 
-/* Use .woocommerce ancestor to beat woocommerce.css specificity (0,2,0 > 0,1,0).
-   WooCommerce sets border-top: 3px solid, background-color: #f6f5f8, and a
-   WooCommerce icon font ::before on these classes. Override all of it. */
+/* 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 {
+.woocommerce .woocommerce-error,
+.alert.woocommerce-info,
+.alert.woocommerce-message,
+.alert.woocommerce-error {
     position: relative;
     padding: 1rem 3rem 1rem 1rem;
     margin: 0 0 1rem;
@@ -58,19 +63,22 @@
     background-image: none;
 }
 
-.woocommerce .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 .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 .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);
@@ -78,10 +86,24 @@
     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 {
+.woocommerce .woocommerce-error::before,
+.alert.woocommerce-info::before,
+.alert.woocommerce-message::before,
+.alert.woocommerce-error::before {
     display: none;
 }
 
@@ -405,6 +427,16 @@
     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,

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.1
+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/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,51 +31,54 @@
     <section class="woocommerce-order-details">
         {{ do_action('woocommerce_order_details_before_order_table', order) }}
 
-        <h2 class="h5 mb-3">{{ __('Order details') }}</h2>
-
-        <div class="table-responsive">
-            <table class="table table-hover align-middle mb-0">
-                <thead class="table-light">
-                    <tr>
-                        <th>{{ __('Product') }}</th>
-                        <th class="text-end">{{ __('Total') }}</th>
-                    </tr>
-                </thead>
-
-                <tbody>
-                    {{ do_action('woocommerce_order_details_before_order_table_items', order) }}
-
-                    {% for item_id, item in order_items %}
-                        {% set product = item.get_product() %}
-                        {% include 'order/order-details-item.html.twig' with {
-                            order: order,
-                            item_id: item_id,
-                            item: item,
-                            show_purchase_note: show_purchase_note,
-                            purchase_note: product ? product.get_purchase_note() : '',
-                            product: product
-                        } %}
-                    {% endfor %}
-
-                    {{ do_action('woocommerce_order_details_after_order_table_items', order) }}
-                </tbody>
-
-                <tfoot>
-                    {% for key, total in order.get_order_item_totals() %}
+        <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>
                         <tr>
-                            <th scope="row">{{ total.label|esc_html }}</th>
-                            <td class="text-end">{{ total.value|wp_kses_post }}</td>
+                            <th>{{ __('Product') }}</th>
+                            <th class="text-end">{{ __('Total') }}</th>
                         </tr>
-                    {% endfor %}
+                    </thead>
 
-                    {% if order.get_customer_note() %}
-                        <tr>
-                            <th>{{ __('Note:') }}</th>
-                            <td class="text-end">{{ order.get_customer_note()|esc_html|nl2br }}</td>
-                        </tr>
-                    {% endif %}
-                </tfoot>
-            </table>
+                    <tbody>
+                        {{ do_action('woocommerce_order_details_before_order_table_items', order) }}
+
+                        {% for item_id, item in order_items %}
+                            {% set product = item.get_product() %}
+                            {% include 'order/order-details-item.html.twig' with {
+                                order: order,
+                                item_id: item_id,
+                                item: item,
+                                show_purchase_note: show_purchase_note,
+                                purchase_note: product ? product.get_purchase_note() : '',
+                                product: product
+                            } %}
+                        {% endfor %}
+
+                        {{ do_action('woocommerce_order_details_after_order_table_items', order) }}
+                    </tbody>
+
+                    <tfoot>
+                        {% for key, total in order.get_order_item_totals() %}
+                            <tr>
+                                <th scope="row">{{ total.label|esc_html }}</th>
+                                <td class="text-end">{{ total.value|wp_kses_post }}</td>
+                            </tr>
+                        {% endfor %}
+
+                        {% if order.get_customer_note() %}
+                            <tr>
+                                <th>{{ __('Note:') }}</th>
+                                <td class="text-end">{{ order.get_customer_note()|esc_html|nl2br }}</td>
+                            </tr>
+                        {% endif %}
+                    </tfoot>
+                </table>
+            </div>
         </div>
 
         {{ do_action('woocommerce_order_details_after_order_table', order) }}