From f4877833cf141945a0175124657ae8737f1a7830 Mon Sep 17 00:00:00 2001 From: magdev Date: Sat, 28 Feb 2026 19:24:55 +0100 Subject: [PATCH] Fix dark mode selects, notice borders, and double notice icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Override WooCommerce's hardcoded #fff on native 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); } +/* 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 {