/** * Dark mode for the Fluent Cart checkout page (outside the Fluent Community * portal — the portal's own checkout embed already gets this from * fluent-community/Modules/Integrations/FluentCart/CartCheckout.php). * * Fluent Cart's checkout.css drives every input/card/border/button on the * page off a fixed set of --fct-checkout-* custom properties (see its :root * block), so redefining those properties under html.dark restyles the whole * form without touching Fluent Cart's own stylesheet. Scoped to html.dark * (not a container class) because Fluent Cart mounts modals such as * .fct_address_modal as a direct child of , outside * .fluent-cart-checkout-page. */ html.dark { --fct-checkout-primary-text-color: var(--fcom-primary-text, #ffffff); --fct-checkout-secondary-text-color: var(--fcom-secondary-text, #99A0AE); --fct-checkout-border-color: var(--fcom-primary-border, #1a2332); --fct-checkout-active-border-color: var(--fcom-primary-button, #1E73BD); --fct-checkout-primary-bg-color: var(--fcom-primary-button, #1E73BD); --fct-checkout-secondary-bg-color: var(--fcom-secondary-bg, #111423); --fct-checkout-btn-bg-color: var(--fcom-primary-button, #1E73BD); --fct-checkout-btn-text-color: var(--fcom-primary-button-text, #ffffff); --fct-btn-border-color: var(--fcom-primary-button, #1E73BD); --fct-checkout-input-bg-color: var(--fcom-secondary-content-bg, #191B2E); --fct-checkout-input-disabled-bg-color: var(--fcom-secondary-bg, #111423); --fct-checkout-input-text-color: var(--fcom-primary-text, #ffffff); --fct-checkout-input-placeholder-text-color: var(--fcom-text-off, #6B7280); --fct-checkout-summary-bg-color: var(--fcom-secondary-content-bg, #191B2E); --fct-checkout-payment-method-bg-color: var(--fcom-secondary-content-bg, #191B2E); --fct-checkout-checkbox-bg: var(--fcom-secondary-content-bg, #191B2E); --fct-checkout-address-wrapper-bg: var(--fcom-secondary-content-bg, #191B2E); --fct-checkout-shipping-methods-bg: var(--fcom-secondary-content-bg, #191B2E); --fct-checkout-address-modal-bg: var(--fcom-secondary-content-bg, #191B2E); --fct-checkout-address-active-border-color: var(--fcom-primary-button, #1E73BD); --fct-select-dropdown-bg: var(--fcom-secondary-content-bg, #191B2E); --fct-select-option-hover-bg: var(--fcom-active-bg, #0f1629); --fct-checkout-radio-bg-color: var(--fcom-secondary-content-bg, #191B2E); --fct-checkout-radio-active-border-color: var(--fcom-primary-button, #1E73BD); --fct-checkout-radio-active-bg-color: var(--fcom-primary-button, #1E73BD); /* The Country/State "nice select" dropdown is a separate compiled * component (resources/public/components/select/style/style.scss) that * doesn't read any --fct-checkout-* variable at all — it reads these * plain (non "-checkout-"-prefixed) names instead. */ --fct-select-input-bg: var(--fcom-secondary-content-bg, #191B2E); --fct-select-input-text-color: var(--fcom-primary-text, #ffffff); --fct-input-bg-color: var(--fcom-secondary-content-bg, #191B2E); --fct-input-text-color: var(--fcom-primary-text, #ffffff); --fct-input-placeholder-text-color: var(--fcom-text-off, #6B7280); --fct-input-disabled-bg-color: var(--fcom-secondary-bg, #111423); --fct-secondary-text-color: var(--fcom-secondary-text, #99A0AE); --checkout-placeholder-color: var(--fcom-text-off, #6B7280); } /* Tax-inclusive/exclusive badges and the tax summary box hardcode their own * light colors in checkout.css rather than reading the variables above. */ html.dark .fct_line_item .fct_item_tax_badge.is-inclusive { background: rgba(76, 175, 80, 0.18) !important; color: #8bd17c !important; } html.dark .fct_line_item .fct_item_tax_badge_amount.is-inclusive { color: #8bd17c !important; } html.dark .fct_line_item .fct_item_tax_badge.is-exclusive { background: rgba(217, 119, 6, 0.18) !important; color: #f0b429 !important; } html.dark .fct_line_item .fct_item_tax_badge_amount.is-exclusive { color: #f0b429 !important; } html.dark .fct_tax_summary_box { background: var(--fcom-secondary-bg, #111423) !important; } html.dark .fluent-cart-checkout-page-form-address-modal-backdrop { background-color: rgba(0, 0, 0, 0.72) !important; }