Odoo Theme SCSS Variable Reference
Critical Load Order Rule
Theme SCSS files load BEFORE core Odoo variables are defined:
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
$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:
// 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
'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
'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')
| Alias | Maps To | Usage |
|---|
'base' | 'font' | Body text |
'headings' | 'headings-font' | All headings |
'navbar' | 'navbar-font' | Navigation |
'buttons' | 'buttons-font' | Buttons |
Complete Example
$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
$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 | Meaning | Typical Usage |
|---|
o-color-1 | Primary/Accent | Brand color, buttons, links |
o-color-2 | Secondary | Accent, secondary buttons |
o-color-3 | Light Background | Section backgrounds, cards |
o-color-4 | White/Lightest | Content background (#FFFFFF) |
o-color-5 | Dark/Text | Headings, footer, dark sections |
Color Combinations (o_cc1 - o_cc5)
| Class | Background | Usage |
|---|
o_cc1 | o-color-4 (White) | Main content |
o_cc2 | o-color-3 (Light) | Alternate sections |
o_cc3 | o-color-2 (Secondary) | Accent sections |
o_cc4 | o-color-1 (Primary) | CTA sections |
o_cc5 | o-color-5 (Dark) | Footer, dark |
Palette Structure
$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
<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)
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
| Category | Count | Description |
|---|
| Typography & Fonts | 13 | Font family configuration |
| Font Sizes | 13 | Base and heading sizes |
| Line Heights | 11 | Text spacing |
| Margins | 22 | Heading and paragraph margins |
| Buttons | 17 | Button styling |
| Inputs | 12 | Form field styling |
| Header | 13 | Header/navigation config |
| Footer | 3 | Footer config |
| Links | 1 | Underline behavior |
| Layout | 3 | Page layout |
| Colors & Gradients | 5 | Palette and gradients |
| Google Fonts | 2 | Additional font loading |
3.1 Typography & Fonts
| Key | Description |
|---|
'font' | Base font for entire site |
'headings-font' | Font for H1-H6 |
'navbar-font' | Navigation menu font |
'buttons-font' | Button text font |
'h2-font' to 'h6-font' | Individual heading fonts |
'display-1-font' to 'display-4-font' | Display text fonts |
3.2 Font Sizes
| Key | Default | Description |
|---|
'font-size-base' | 1rem | Base font size (16px) |
'small-font-size' | 0.875rem | Small text (14px) |
'h1-font-size' to 'h6-font-size' | Calculated | Heading sizes |
'display-1-font-size' to 'display-6-font-size' | 5rem-2.5rem | Display sizes |
3.3 Line Heights & Margins
| Key | Default | Description |
|---|
'body-line-height' | 1.5 | Body text |
'headings-line-height' | 1.2 | All headings |
'h2-line-height' to 'h6-line-height' | Inherits | Individual |
'paragraph-margin-top' | 0 | Paragraph top |
'paragraph-margin-bottom' | 16px | Paragraph bottom |
'headings-margin-top' / 'headings-margin-bottom' | 0 / 0.5rem | Headings |
3.4 Buttons (17 Keys)
| Key | Description |
|---|
'btn-padding-y' / 'btn-padding-x' | Default padding |
'btn-font-size' | Font size |
'btn-padding-y-sm' / 'btn-padding-x-sm' | Small button |
'btn-padding-y-lg' / 'btn-padding-x-lg' | Large button |
'btn-border-width' | Border thickness |
'btn-border-radius' / -sm / -lg | Corner radius |
'btn-primary-outline' | Primary as outline (bool) |
'btn-secondary-outline' | Secondary as outline (bool) |
'btn-primary-flat' / 'btn-secondary-flat' | Flat style (bool) |
'btn-ripple' | Material ripple effect (bool) |
3.5 Inputs (12 Keys)
| Key | Description |
|---|
'input-padding-y' / 'input-padding-x' | Input padding |
'input-font-size' | Input font size |
'input-border-width' | Border thickness |
'input-border-radius' / -sm / -lg | Corner radius |
3.6 Header & Navigation (13 Keys)
| Key | Values | Description |
|---|
'header-template' | 'default' / 'hamburger' / 'vertical' / 'sidebar' | Header layout |
'header-links-style' | 'default' / 'fill' / 'outline' / 'pills' / 'block' / 'border-bottom' | Link style |
'header-font-size' | CSS length | Header text size |
'logo-height' | CSS length | Logo height |
'fixed-logo-height' | CSS length | Logo when fixed |
'hamburger-position' | 'left' / 'center' / 'right' | Desktop position |
'hamburger-position-mobile' | 'left' / 'center' / 'right' | Mobile position |
3.7 Footer (3 Keys)
| Key | Values | Description |
|---|
'footer-template' | 'default' / 'centered' / 'minimalist' / 'links' / 'descriptive' | Layout |
'footer-effect' | null / 'slideout_slide_hover' / 'slideout_shadow' | Animation |
'footer-scrolltop' | boolean | Scroll-to-top button |
3.8 Links & Layout
| Key | Values | Description |
|---|
'link-underline' | 'never' / 'hover' / 'always' | Underline behavior |
'layout' | 'full' / 'boxed' | Page layout |
'body-image' | URL | Background image |
3.9 Colors & Gradients
| Key | Description |
|---|
'color-palettes-name' | Active color palette name |
'menu-gradient' | Menu background gradient |
'footer-gradient' | Footer background gradient |
Complete Example — Modern Corporate Theme
$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
$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!)
