Skills DirectorySearch all skills ↗AI agent skill · by @ahmed-lakosha
Theme Create
Odoo theme scaffolding and creation pipeline. Generates complete, installable Odoo theme modules with proper file structure, SCSS configuration, page templates, mirror models, theme.utils activation, and auto-fix installation. Supports Odoo 14-19. <example> Context: User wants to create a new Odoo website theme user: "Create a new website theme for Odoo 17" assistant: "I will use the theme-create skill to scaffold a complete theme module." <commentary>Core trigger - new theme creation.</commentary> </example> <example> Context: User wants to scaffold a theme from Figma user: "Build an Odoo 17 theme from this Figma design" assistant: "I will scaffold the theme module and extract design tokens from Figma." <commentary>Theme creation with Figma extraction.</commentary> </example> <example> Context: User wants mirror models for multi-website user: "Create theme mirror models for my website pages" assistant: "I will generate theme.ir.ui.view and theme.website.page records." <commentary>Mirror model generation.</commentary> </example> <example> Context: User wants to fix a broken theme installation user: "My theme won't install, I get an undefined variable error" assistant: "I will diagnose the SCSS load order issue and fix the map-merge pattern." <commentary>Theme installation debugging.</commentary> </example>
Archived 2026-10-23 · Source updated 2026-03-28 · License: MIT. Check the original repository for the latest version.
SKILL.md instructions
# Theme Creation Skill
## Critical Rules
1. **NEVER modify core Odoo** in `odoo/` or `odoo/addons/`
2. **NEVER use `map-merge()`** with core Odoo variables in theme SCSS — they're undefined at load time
3. **NEVER use `ir.asset`** records for Google Fonts — use `$o-theme-font-configs`
4. **ALWAYS use `('prepend', ...)`** for primary_variables.scss in asset bundles
5. **H6 is ALWAYS 16px** (1rem) — the fixed base reference
6. All manifests must include `author: 'TaqaTechno'`, `website`, `support`, `license: 'LGPL-3'`
## Generated Theme Structure (v8.0)
```
theme_<name>/
├── __init__.py # Imports models
├── __manifest__.py # With proper asset bundles
├── models/
│ ├── __init__.py # Imports theme_<name>
│ └── theme_<name>.py # theme.utils implementation (REQUIRED!)
├── security/
│ └── ir.model.access.csv
├── data/
│ ├── assets.xml # Minimal (fonts via SCSS, not ir.asset!)
│ ├── menu.xml
│ └── pages/ # Individual page files (best practice)
│ ├── home_page.xml # Inherits website.homepage
│ ├── aboutus_page.xml # theme.website.page
│ ├── contactus_page.xml # Inherits website.contactus
│ └── services_page.xml # theme.website.page
├── views/
│ ├── layout/
│ │ └── templates.xml # Base layout templates
│ └── snippets/
│ └── custom_snippets.xml
└── static/src/
├── scss/
│ ├── primary_variables.scss # Theme variables + font configs
│ └── theme.scss # Additional custom styles
├── js/
│ └── theme.js # publicWidget implementations
└── img/
```
## Manifest Template
```python
{
'name': 'Theme <Name>',
'version': '<odoo_version>.0.1.0.0',
'category': 'Theme/Creative',
'summary': 'Custom theme for <client>',
'author': 'TaqaTechno',
'website': 'https://www.taqatechno.com/',
'support': 'info@taqatechno.com',
'license': 'LGPL-3',
'depends': ['website'],
'data': [
'security/ir.model.access.csv',
'views/layout/templates.xml',
'views/snippets/custom_snippets.xml',
'data/menu.xml',
'data/pages/home_page.xml',
'data/pages/aboutus_page.xml',
'data/pages/contactus_page.xml',
],
'assets': {
'web._assets_primary_variables': [
('prepend', 'theme_<name>/static/src/scss/primary_variables.scss'),
],
'web.assets_frontend': [
'theme_<name>/static/src/scss/theme.scss',
'theme_<name>/static/src/js/theme.js',
],
},
'installable': True,
'auto_install': False,
'application': False,
}
```
## SCSS Load Order (Critical)
```
1. YOUR theme's primary_variables.scss (via 'prepend') ← FIRST
2. Odoo core primary_variables.scss ← SECOND
3. Other SCSS files
CONSEQUENCE:
- CANNOT use map-merge() with core variables (they don't exist yet!)
- MUST define standalone variables
- Use 'color-palettes-name': 'default-1' to reference existing palettes
WRONG: $o-color-palettes: map-merge($o-color-palettes, (...));
RIGHT: $o-website-values-palettes: ( ( 'color-palettes-name': 'default-1' ) );
```
## primary_variables.scss Template
```scss
// ===================================================================
// Theme: <Name> — Generated by TaqaTechno
// PREPENDED before Odoo core — DO NOT use map-merge()!
// ===================================================================
// === Font Configuration (STANDALONE) ===
$o-theme-font-configs: (
'Inter': (
'family': ('Inter', sans-serif),
'url': 'Inter:300,300i,400,400i,500,500i,600,600i,700,700i',
),
);
// === Website Values Palette (MASTER CONFIGURATION) ===
$o-website-values-palettes: (
(
'color-palettes-name': 'default-1',
// Typography
'font': 'Inter',
'headings-font': 'Inter',
'navbar-font': 'Inter',
'buttons-font': 'Inter',
// Header (NO custom header.xml needed!)
'header-template': 'default',
'header-links-style': 'default',
'logo-height': 3rem,
'fixed-logo-height': 2rem,
// Buttons
'btn-padding-y': 0.45rem,
'btn-padding-x': 1.35rem,
'btn-border-radius': 0.25rem,
// Footer (NO custom footer.xml needed!)
'footer-template': 'default',
'footer-scrolltop': true,
// Links & Layout
'link-underline': 'hover',
'layout': 'full',
)
);
// === Typography Multipliers ===
$o-theme-h1-font-size-multiplier: (64 / 16); // 64px
$o-theme-h2-font-size-multiplier: (48 / 16); // 48px
$o-theme-h3-font-size-multiplier: (32 / 16); // 32px
$o-theme-h4-font-size-multiplier: (24 / 16); // 24px
$o-theme-h5-font-size-multiplier: (20 / 16); // 20px
$o-theme-h6-font-size-multiplier: (16 / 16); // 16px (FIXED)
```
## Page Creation Patterns
### Homepage (inherits website.homepage)
```xml
<template id="view_home" inherit_id="website.homepage" name="Home">
<xpath expr="//div[@id='wrap']" position="replace">
<div id="wrap" class="oe_structure">
<!-- Homepage content -->
</div>
</xpath>
</template>
```
### Contact (inherits website.contactus)
```xml
<template id="view_contact" inherit_id="website.contactus" name="Contact">
<xpath expr="//h1" position="replace">
<h1>Get in Touch</h1>
</xpath>
</template>
```
### Custom Pages (theme.website.page)
```xml
<template id="view_about" name="About">
<t t-call="website.layout">
<div id="wrap" class="oe_structure">
<section class="s_title pt96 pb48">
<div class="container"><h1>About Us</h1></div>
</section>
</div>
</t>
</template>
<record id="page_about" model="theme.website.page">
<field name="view_id" ref="view_about"/>
<field name="is_published" eval="True"/>
<field name="url">/about</field>
</record>
```
## Theme Mirror Model Architecture
```
theme.ir.ui.view (Template) → ir.ui.view (Actual, with website_id)
theme.website.page (Template) → website.page (Actual, with website_id)
```
Each website gets independent copies, enabling theme reuse across multiple sites.
## theme.utils Activation (REQUIRED)
Every theme MUST include `models/theme_<name>.py`:
```python
from odoo import models
class Theme<Name>(models.AbstractModel):
_inherit = 'theme.utils'
def _theme_<name>_post_copy(self, mod):
"""Called automatically when theme is installed on a website."""
# Enable header template
self.enable_view('website.template_header_default')
# Enable footer template
self.enable_view('website.template_footer_contact')
# Show logo, not brand name
self.enable_view('website.option_header_brand_logo')
self.disable_view('website.option_header_brand_name')
```
**Method name MUST be** `_theme_{technical_name}_post_copy` where technical_name matches the folder name.
**Available methods**: `enable_view(xml_id)`, `disable_view(xml_id)`, `enable_asset(xml_id)`, `disable_asset(xml_id)`
## Installation & Testing
```bash
# 1. Update module list
python -m odoo -c conf/<PROJECT>.conf -d <DB> --update-list
# 2. Install theme
python -m odoo -c conf/<PROJECT>.conf -d <DB> -i theme_<name> --stop-after-init
# 3. If errors, auto-fix and retry (up to 3 attempts)
```
### Common Auto-Fix Patterns
| Error | Fix |
|-------|-----|
| `Undefined variable "$o-color-palettes"` | Remove map-merge, use standalone |
| `Undefined variable "$o-theme-font-configs"` | Define standalone (no map-merge) |
| `SyntaxError in SCSS` | Parse error location, fix syntax |
| `Module not found` | Add dependency to manifest |
| `Malformed Google Fonts @import` | Remove ir.asset, use $o-theme-font-configs |
### Testing Checklist
- [ ] Theme installs without errors
- [ ] CSS compilation succeeds
- [ ] No SCSS/JS errors in browser console
- [ ] Header and footer styling apply correctly
- [ ] Responsive layout works on mobile/tablet/desktop
- [ ] Website builder (edit mode) functions without errors
## Version-Specific Notes
| Odoo | Bootstrap | Snippet Registration | Key Differences |
|------|-----------|---------------------|-----------------|
| 14-15 | 4.x | Simple XPath | `ml-*`/`mr-*` classes |
| 16-17 | 5.1.3 | Simple XPath | `ms-*`/`me-*` classes |
| 18-19 | 5.1.3 | Groups required | snippet-group attribute needed |
For the complete 115+ SCSS variable reference, see the **theme-scss** skill.
For Figma-to-Odoo workflow and page template matching, see the **theme-design** skill.