To ensure that dark mode persists as the default theme in Odoo 18 and prevents the need for a manual page refresh after login, the issue lies in how the Odoo front-end initializes the theme. When a user logs in, the cookie is set but the page doesn't automatically apply the dark theme until it's reloaded.
Here’s how you can fix this issue:
Solution 1: Force Dark Mode on Page Initialization
Modify your JavaScript module to apply the dark theme as soon as the page loads, regardless of the login state.
Updated Code:
/** @odoo-module **/
import { cookie as cookieManager } from "@web/core/browser/cookie";
function setDarkMode() {
// Set the color scheme cookie to dark mode permanently
cookieManager.set("color_scheme", "dark", { path: "/", expires: 365 * 24 * 60 * 60 });
}
// Apply dark mode immediately during page initialization
function applyDarkModeImmediately(env) {
const scheme = "dark";
env.services.color_scheme.switchToColorScheme(scheme); // Force the color scheme service to apply dark mode
}
// Ensure the theme remains dark
export function switchColorSchemeItem(env) {
// Apply dark mode when toggled
setDarkMode();
applyDarkModeImmediately(env);
return {
type: "item",
id: "color_scheme.switch_theme",
description: "Dark Mode",
callback: () => {
setDarkMode();
applyDarkModeImmediately(env);
},
isChecked: true,
sequence: 30,
};
}
// Set dark mode cookie and apply the theme on module initialization
setDarkMode();
// Automatically apply dark mode on page load
odoo.define("custom_dark_mode", function (require) {
const { registry } = require("@web/core/registry");
const { services } = require("@web/core/environment");
registry.category("services").add("dark_mode_service", {
dependencies: ["color_scheme"],
start(env) {
// Apply dark mode immediately after login
applyDarkModeImmediately(env);
},
});
});
What This Does:
- Cookie Initialization:
- The color_scheme cookie is set to dark permanently.
- Theme Application on Load:
- The applyDarkModeImmediately function ensures that the dark theme is applied as soon as the page loads, forcing the color scheme service to use the dark mode.
- Persistent Enforcement:
- The custom service ensures dark mode is applied right after login without requiring a refresh.
Solution 2: Reload the Page Automatically After Login
If you're unable to initialize the dark mode immediately, you can trigger an automatic page reload after login to ensure the dark mode is applied without manual intervention.
Code Snippet:
/** @odoo-module **/
import { cookie as cookieManager } from "@web/core/browser/cookie";
// Set Dark Mode
function setDarkMode() {
cookieManager.set("color_scheme", "dark", { path: "/", expires: 365 * 24 * 60 * 60 });
}
// Auto-reload after login to apply dark mode
odoo.define("auto_reload_after_login", function (require) {
const session = require("web.session");
// Trigger reload if the user just logged in
session.on("login", () => {
if (!cookieManager.get("reloaded")) {
cookieManager.set("reloaded", "true", { path: "/", expires: 1 });
window.location.reload();
} else {
cookieManager.delete("reloaded");
}
});
});
// Set dark mode on module load
setDarkMode();
How It Works:
- After a login event, the page reloads automatically to ensure the dark theme is applied properly.
- The reloaded cookie prevents the page from reloading infinitely.
Solution 3: Use Backend Override (Preferred for Full Control)
If modifying the frontend is not enough, you can enforce dark mode from the backend by customizing the user preferences.
Steps:
-
Create a Custom Backend Module:
- Write a custom module that sets the color_scheme preference for all users to "dark."
-
Python Code for Backend Enforcement:
from odoo import models, fields, api
class ResUsers(models.Model):
_inherit = 'res.users'
@api.model
def create(self, vals):
# Set default color scheme to dark for new users
vals['color_scheme'] = 'dark'
return super(ResUsers, self).create(vals)
def write(self, vals):
# Ensure color scheme stays dark
if 'color_scheme' not in vals:
vals['color_scheme'] = 'dark'
return super(ResUsers, self).write(vals)
-
Enforce During Login:
- Override the login method to set the color_scheme cookie for users.
Final Steps
- Test in Different Scenarios:
- Test the behavior for different users and ensure dark mode applies without manual refresh.
- Clear Cache:
- Clear browser and Odoo caches to ensure changes take effect.
- Apply Custom Service Carefully:
- If using a custom service, ensure it doesn’t conflict with other Odoo modules.
By implementing one of the above solutions, you can ensure dark mode is applied seamlessly after login without requiring a manual refresh. Let me know if you need further guidance!