Theme Scss

Odoo Theme SCSS Variable Reference

Critical Load Order Rule

Theme SCSS files load BEFORE core Odoo variables are defined:

Copy code
1. YOUR theme's primary_variables.scss (via prepend)  ← FIRST
2. Odoo core primary_variables.scss                    ← SECOND

CONSEQUENCE: CANNOT use map-merge() with core variables!

WRONG: $o-color-palettes: map-merge($o-color-palettes, (...)); → Undefined variable error RIGHT: Define standalone variables without map-merge

1. $o-theme-font-configs — Google Fonts

scssCopy code
$o-theme-font-configs: (
    '<Font Name>': (
        'family': (<CSS font-family list>),     // Required
        'url': '<Google Fonts query param>',     // Required — NOT the full URL!
        'properties': (                          // Optional: per-context overrides
            '<font-alias>': ( '<key>': <value> ),
        ),
    ),
);

CRITICAL: The 'url' key contains only the query parameter:

scssCopy code
// CORRECT
'url': 'Poppins:300,300i,400,400i,600,600i,700,700i'

// WRONG — do NOT include full URL
'url': 'https://fonts.googleapis.com/css?family=Poppins:300,400,700'

Font Weight Format

scssCopy code
'url': 'Poppins:300,300i,400,400i,600,600i,700,700i'
//      Light  Light-i  Regular Regular-i SemiBold ...
// Number alone = normal, Number + 'i' = italic

Multi-word Font Names

scssCopy code
'url': 'Open+Sans:300,300i,400,400i,700,700i'
'url': 'IBM+Plex+Sans+Arabic:100,200,300,400,500,600,700'

Font Aliases (for 'properties')

Complete Example

scssCopy code
$o-theme-font-configs: (
    'Poppins': (
        'family': ('Poppins', sans-serif),
        'url': 'Poppins:300,300i,400,400i,500,500i,600,600i,700,700i',
        'properties': (
            'base': ( 'font-size-base': (15 / 16) * 1rem ),
        ),
    ),
    'Playfair Display': (
        'family': ('Playfair Display', serif),
        'url': 'Playfair+Display:400,400i,700,700i',
    ),
);

Arabic/RTL Fonts

scssCopy code
$o-theme-font-configs: (
    'IBM Plex Sans Arabic': (
        'family': ('IBM Plex Sans Arabic', sans-serif),
        'url': 'IBM+Plex+Sans+Arabic:100,200,300,400,500,600,700',
    ),
    'Cairo': (
        'family': ('Cairo', sans-serif),
        'url': 'Cairo:200,300,400,500,600,700,800,900',
    ),
);

2. $o-color-palettes — Color System

The Five Semantic Colors

Color Combinations (o_cc1 - o_cc5)

Palette Structure

scssCopy code
$o-color-palettes: map-merge($o-color-palettes, (
    'my-palette': (
        'o-color-1': #09294F,
        'o-color-2': #FFA807,
        'o-color-3': #F6F4F0,
        'o-color-4': #FFFFFF,
        'o-color-5': #1B212C,

        // Component assignments
        'menu': 1,
        'footer': 5,
        'copyright': 5,

        // Color combination overrides
        'o-cc5-link': 'o-color-4',
        'o-cc5-btn-primary': 'o-color-2',
    ),
));

NOTE: map-merge with $o-color-palettes works ONLY in non-theme modules. In themes (which use prepend), use $o-website-values-palettes with 'color-palettes-name' instead.

HTML Usage

xmlCopy code
<section class="o_cc o_cc1 pt32 pb32"><!-- White bg --></section>
<section class="o_cc o_cc2 pt32 pb32"><!-- Light bg --></section>
<section class="o_cc o_cc5 pt32 pb32"><!-- Dark bg --></section>

Color Derivation (when only 2 colors are available)

Copy code
o-color-3 = lighten(primary, 45%)
o-color-4 = #FFFFFF
o-color-5 = darken(primary, 40%) or #191A19

3. $o-website-values-palettes — Master Configuration (115+ Keys)

Quick Reference

3.1 Typography & Fonts

3.2 Font Sizes

3.3 Line Heights & Margins

3.4 Buttons (17 Keys)

3.5 Inputs (12 Keys)

3.6 Header & Navigation (13 Keys)

3.7 Footer (3 Keys)

3.8 Links & Layout

3.9 Colors & Gradients

Complete Example — Modern Corporate Theme

scssCopy code
$o-website-values-palettes: (
    (
        'color-palettes-name': 'my-corporate-palette',

        // Typography
        'font': 'Inter',
        'headings-font': 'Inter',
        'navbar-font': 'Inter',
        'buttons-font': 'Inter',
        'font-size-base': 1rem,
        'headings-line-height': 1.3,
        'body-line-height': 1.6,

        // Header
        'header-template': 'default',
        'header-links-style': 'default',
        'logo-height': 48px,
        'fixed-logo-height': 36px,

        // Buttons
        'btn-padding-y': 0.75rem,
        'btn-padding-x': 1.5rem,
        'btn-border-radius': 8px,
        'btn-ripple': true,

        // Inputs
        'input-padding-y': 0.75rem,
        'input-border-radius': 8px,

        // Footer
        'footer-template': 'default',
        'footer-scrolltop': true,

        // Links
        'link-underline': 'hover',
        'layout': 'full',
    ),
);

Typography Multipliers

scssCopy code
$o-theme-h1-font-size-multiplier: (64 / 16); // 64px → 4.0
$o-theme-h2-font-size-multiplier: (48 / 16); // 48px → 3.0
$o-theme-h3-font-size-multiplier: (32 / 16); // 32px → 2.0
$o-theme-h4-font-size-multiplier: (24 / 16); // 24px → 1.5
$o-theme-h5-font-size-multiplier: (20 / 16); // 20px → 1.25
$o-theme-h6-font-size-multiplier: (16 / 16); // 16px → 1.0 (FIXED!)