Skip to Content
Menu
Dette spørgsmål er blevet anmeldt
2 Besvarelser
1919 Visninger

I’m trying to enforce dark mode as the default and only theme in Odoo 18 for all users. I’ve implemented the following approach:

  1. Used cookieManager to set the color_scheme cookie to "dark" permanently.
  2. Ensured the switchColorSchemeItem function forces dark mode and prevents switching back.prevents switching back.

What I've done worked but when the user logout the cookie is removed and when the user logs in again the cookie is set and the color_scheme in the cookie is dark but the Odoo theme is light and it seems after login the cookie does not work and should refresh the page to work correctly.|

What should I do to make the theme dark without manually refreshing it after login?


my 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 });
}

export function switchColorSchemeItem(env) {
// Ensure that the color scheme remains Dark and the switch cannot happen
setDarkMode();

return {
type: "item",
id: "color_scheme.switch_theme",
description: "Dark Mode",
callback: () => {
// Prevent any switch action, ensuring it stays in Dark Mode
setDarkMode();
const cookie = cookieManager.get("color_scheme");
const scheme = "dark";
env.services.color_scheme.switchToColorScheme(scheme);
},
isChecked: true, // Reflect Dark Mode as active
sequence: 30,
};
}

// Set Dark Mode on load and prevent switching back
setDarkMode();

Avatar
Kassér
Bedste svar

Hi,


Try the following theme,

https://apps.odoo.com/apps/themes/18.0/dark_mode_backend


Hope it helps

Avatar
Kassér
Bedste svar

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:

  1. Cookie Initialization:
    • The color_scheme cookie is set to dark permanently.
  2. 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.
  3. 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:

  1. Create a Custom Backend Module:
    • Write a custom module that sets the color_scheme preference for all users to "dark."
  2. 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)
    
  3. 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!

Avatar
Kassér
Related Posts Besvarelser Visninger Aktivitet
0
okt. 22
796
3
maj 25
4877
3
aug. 24
5720
0
maj 24
1357
2
apr. 24
1475