Odoo 18 Custom Color Palette: Step-by-Step Guide

Customize Your Odoo 18 Interface: A Step-by-Step Guide to Changing Color Palettes

Odoo 18 brings a fresh and modern interface, but what if you want to make it truly yours? Changing the color palette is a fantastic way to personalize your Odoo experience and align it with your brand. This guide will walk you through the process of creating and applying a custom color palette in Odoo 18 using SCSS and manifest file modifications.

Why Customize Your Color Palette?

• ▹ Brand Alignment: Ensure your Odoo instance reflects your company's visual identity.
• ▹ User Experience: Create a more comfortable and intuitive interface for your team.
• ▹ Personalization: Tailor Odoo to your specific preferences and needs.

Let's Get Started!

Step 1: Create Your Custom SCSS File

First, you'll need to create a new SCSS file in your custom Odoo module. This file will define your custom color palette.

• ▹ Navigate to your custom module's static directory. Create a directory named src/css if it doesn't already exist.
• ▹ Create a file named custom_color.scss inside the css directory.
• ▹ Add the following SCSS code to your custom_color.scss file:

$o-color-palettes: map-merge($o-color-palettes,
   (
      'custom': (
         'o-color-1': #bedb39,   /* Custom primary color */
         'o-color-2': #2c3e50,   /* Custom secondary color */
         'o-color-3': #f2f2f2,   /* Background color */
         'o-color-4': #ffffff,   /* Background color */
         'o-color-5': #000000,   /* Text color */
      ),
   )
);

$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'custom');  /* Add 'custom' to the selected palettes */

$o-website-values-palettes: (
   (
      'color-palettes-name': 'custom',   /* Set 'custom' as the active palette */
   ),
);

Understanding the Code:

• ▹ $o-color-palettes: This SCSS map stores all the available color palettes in Odoo. We use map-merge to add our custom palette to it.
• ▹ 'custom': This is the name of our custom palette.
• ▹ 'o-color-1', 'o-color-2', etc.: These are the color variables used by Odoo. Replace the hex codes with your desired colors.
• ▹ $o-selected-color-palettes-names: This variable defines which palettes are available for selection. We append our 'custom' palette to this list.
• ▹ $o-website-values-palettes: This variable sets the active color palette. We set 'custom' as the active palette.

Step 2: Update Your Module's Manifest File

Next, you need to tell Odoo to include your custom SCSS file.

• ▹ 1. Open your module's __manifest__.py file.
• ▹ 2. Add the following line to the assets section:

'web._assets_primary_variables': [
    'your_module/static/src/css/custom_color.scss',
],

Replace your_module with the actual name of your Odoo module.

Step 3: Update and Upgrade Your Module

Finally, you need to update and upgrade your module to apply the changes.

• ▹ 1. Go to the Apps module in Odoo.
• ▹ 2. Click on "Update App List".
• ▹ 3. Search for your module and click "Upgrade".

Tips and Best Practices:

• ▹ Color Selection: Use a color palette generator or design tool to create a cohesive and visually appealing color scheme.
• ▹ Variable Naming: Stick to Odoo's naming conventions for color variables to ensure compatibility.
• ▹ Testing: Thoroughly test your custom color palette on different screens and devices.
• ▹ Override: Be aware that theme updates can override your customizations, so keeping your code in your own module is very important.

Conclusion

Customizing the color palette in Odoo 18 is a simple yet powerful way to enhance your user experience and brand identity. By following these steps, you can create a unique and personalized Odoo interface that perfectly suits your needs.

Feel free to experiment with different color combinations and create a truly customized Odoo experience. Happy customizing!