A Practical Guide to Adding Dark Mode in Your Odoo Theme

With the growing demand for personalized user experiences, dark mode has become a staple feature in modern web design. It not only reduces eye strain but also provides a stylish alternative to the traditional light interface. If you’re running an Odoo-based website or web app, implementing dark mode can significantly enhance user satisfaction and engagement.

In this article, we’ll walk through how you can add a dark mode toggle to your custom Odoo theme — step by step.

Step 1: Create a Dark Mode Stylesheet

The first step is to define the dark mode styling rules using SCSS (preferred over plain CSS in Odoo for maintainability and reuse).

Create a file named dark_mode.scss inside your theme’s static/src/scss/ directory and include styles like:

scss

CopyEdit

body.dark-mode {
background-color: #121212;
color: #f5f5f5;
}

body.dark-mode .navbar,
body.dark-mode footer {
background-color: #1e1e1e;
}

body.dark-mode a {
color: #bb86fc;
}

This ensures dark mode elements are visually distinct while maintaining accessibility.

Then, update your theme’s __manifest__.py to load the SCSS file:

python

CopyEdit

‘assets’: {
    ‘web.assets_frontend’: [
        ‘your_theme_name/static/src/scss/dark_mode.scss’,
    ],
}

Step 2: Add a Toggle Button to Switch Themes

To let users switch between light and dark modes, add a button to your main layout (usually in the header):

xml

CopyEdit

This will be the control for activating or deactivating dark mode on the frontend.

Step 3: Enable Theme Switching via JavaScript

Now let’s make that toggle button functional using JavaScript. Create a file like dark_mode.js and write the following logic:

javascript

CopyEdit

odoo.define(‘your_theme_name.dark_mode’, function (require) {
    ‘use strict’;
    $(document).ready(function () {
        const isDark = localStorage.getItem(‘darkMode’) === ‘true’;
        if (isDark) $(‘body’).addClass(‘dark-mode’);

        $(‘#toggleDarkMode’).on(‘click’, function () {
            $(‘body’).toggleClass(‘dark-mode’);
            localStorage.setItem(‘darkMode’, $(‘body’).hasClass(‘dark-mode’));
        });
    });
});

Also include this file in your asset bundle:

python

CopyEdit

‘web.assets_frontend’: [
‘your_theme_name/static/src/js/dark_mode.js’,
],

Step 4: Verify the Dark Mode Experience

Once everything is set, test your website thoroughly. Check product pages, forms, popups, and blog posts to ensure colors and UI elements remain readable and visually balanced.

Pay special attention to:

Button visibility

Image overlays or background sections

Text contrast in tables or menus

Wrapping Up

Dark mode is no longer a luxury — it’s an expectation for many users. Implementing it in your Odoo theme is relatively simple and goes a long way toward creating a personalized and user-friendly site experience. By combining SCSS, JavaScript, and a toggle control, you can roll out a professional dark mode that remembers user preferences and enhances usability across devices.

Blog Post

A Practical Guide to Adding Dark Mode in Your Odoo Theme

lisabrown10