diff --git a/fusion-woo-odoo/fusion_woocommerce/__manifest__.py b/fusion-woo-odoo/fusion_woocommerce/__manifest__.py index 0f1f1e4e..1370bb1f 100644 --- a/fusion-woo-odoo/fusion_woocommerce/__manifest__.py +++ b/fusion-woo-odoo/fusion_woocommerce/__manifest__.py @@ -34,6 +34,7 @@ ], 'assets': { 'web.assets_backend': [ + 'fusion_woocommerce/static/src/js/theme_detect.js', 'fusion_woocommerce/static/src/css/woo_styles.css', 'fusion_woocommerce/static/src/js/ajax_search.js', 'fusion_woocommerce/static/src/js/product_mapping.js', diff --git a/fusion-woo-odoo/fusion_woocommerce/static/src/css/woo_styles.css b/fusion-woo-odoo/fusion_woocommerce/static/src/css/woo_styles.css index 0a13ff36..19bbcb93 100644 --- a/fusion-woo-odoo/fusion_woocommerce/static/src/css/woo_styles.css +++ b/fusion-woo-odoo/fusion_woocommerce/static/src/css/woo_styles.css @@ -45,11 +45,10 @@ --woo-input-border: #d1d5db; } -/* Dark mode — Odoo 19 applies .o_dark on html or body, - and also uses [style*="color-scheme: dark"] on html */ -html.o_dark, -html[style*="color-scheme: dark"], -body.o_dark { +/* Dark mode — theme_detect.js reads Odoo's color_scheme cookie and sets + data-woo-theme="dark" on . We also include @media query as fallback. */ +html[data-woo-theme="dark"], +html[style*="color-scheme: dark"] { --woo-bg-primary: #1e1e2e; --woo-bg-secondary: #262637; --woo-bg-tertiary: #2e2e42; diff --git a/fusion-woo-odoo/fusion_woocommerce/static/src/js/theme_detect.js b/fusion-woo-odoo/fusion_woocommerce/static/src/js/theme_detect.js new file mode 100644 index 00000000..681c3906 --- /dev/null +++ b/fusion-woo-odoo/fusion_woocommerce/static/src/js/theme_detect.js @@ -0,0 +1,25 @@ +/** @odoo-module **/ + +/** + * Theme detection for Fusion WooCommerce. + * + * Odoo 19 stores dark mode preference in the "color_scheme" cookie ("dark" or "bright"). + * It also sets `color-scheme: dark` on .o_web_client via SCSS. + * + * This script reads the cookie and adds a `data-woo-theme="dark"` attribute on + * so our CSS can target it reliably. It also observes for changes (user toggles theme). + */ +import { cookie } from "@web/core/browser/cookie"; + +function applyTheme() { + const scheme = cookie.get("color_scheme"); + const isDark = scheme === "dark"; + document.documentElement.setAttribute("data-woo-theme", isDark ? "dark" : "light"); +} + +// Apply on load +applyTheme(); + +// Re-apply periodically in case user toggles theme mid-session +// (Odoo doesn't fire a DOM event for this, so we poll the cookie) +setInterval(applyTheme, 2000);