admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: proper Odoo 19 dark mode detection via cookie-based theme_detect.js

Browse Source 
Odoo 19 does NOT use .o_dark class or data-bs-theme attribute. It sets
color-scheme via SCSS and stores preference in color_scheme cookie.
Added theme_detect.js that reads the cookie and sets data-woo-theme="dark"
on <html> for reliable CSS targeting. Fixed CSS dark mode selectors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-03-31 22:21:17 -04:00
parent c5d2ac1d6b
commit 396f895ae2
3 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
fusion-woo-odoo/fusion_woocommerce/__manifest__.py
View File

@@ -34,6 +34,7 @@
], ],
'assets': { 'assets': {
'web.assets_backend': [ 'web.assets_backend': [
'fusion_woocommerce/static/src/js/theme_detect.js',
'fusion_woocommerce/static/src/css/woo_styles.css', 'fusion_woocommerce/static/src/css/woo_styles.css',
'fusion_woocommerce/static/src/js/ajax_search.js', 'fusion_woocommerce/static/src/js/ajax_search.js',
'fusion_woocommerce/static/src/js/product_mapping.js', 'fusion_woocommerce/static/src/js/product_mapping.js',

9
fusion-woo-odoo/fusion_woocommerce/static/src/css/woo_styles.css
View File

@@ -45,11 +45,10 @@
--woo-input-border: #d1d5db; --woo-input-border: #d1d5db;
} }
/* Dark mode — Odoo 19 applies .o_dark on html or body, /* Dark mode — theme_detect.js reads Odoo's color_scheme cookie and sets
and also uses [style*="color-scheme: dark"] on html */ data-woo-theme="dark" on <html>. We also include @media query as fallback. */
html.o_dark, html[data-woo-theme="dark"],
html[style*="color-scheme: dark"], html[style*="color-scheme: dark"] {
body.o_dark {
--woo-bg-primary: #1e1e2e; --woo-bg-primary: #1e1e2e;
--woo-bg-secondary: #262637; --woo-bg-secondary: #262637;
--woo-bg-tertiary: #2e2e42; --woo-bg-tertiary: #2e2e42;

25
fusion-woo-odoo/fusion_woocommerce/static/src/js/theme_detect.js Normal file
View File

@@ -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 <html>
* 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);