This guide is for developers who want to add new built-in templates to Noctalia.
For users who want to create custom templates for their own applications, see User Templates.
Overview
Adding a new built-in template involves two steps:
Step 1: Create the Template File
Create your template file in Assets/Templates/:
Assets/Templates/myapp.conf
background =
foreground =
accent =
border =
For complete template syntax documentation (colors, formats, filters, blocks), see the User Templates guide.
Step 2: Register the Template
Open Services/Theming/TemplateRegistry.qml and add your template.
For Terminal Emulators
Add to the terminals array:
{
"id": "kitty",
"name": "Kitty",
"templatePath": "terminal/kitty.conf",
"outputPath": "~/.config/kitty/themes/noctalia.conf",
"postHook": `${templateApplyScript} kitty`
}
Properties:
id- Unique identifier used in settingsname- Display name in the UItemplatePath- Relative path fromAssets/Templates/outputPath- Destination path (~is expanded to home directory)postHook- Shell command to run after generation (e.g., to reload the terminal)
For Applications
Add to the applications array:
{
"id": "myapp",
"name": "My App",
"category": "misc",
"input": "myapp.conf",
"outputs": [
{
"path": "~/.config/myapp/themes/noctalia.conf"
}
],
"postProcess": (mode) => `${templateApplyScript} myapp`
}
Properties:
id- Unique identifier used in settingsname- Display name in the UIcategory- Category for organization (see below)input- Template filename inAssets/Templates/outputs- Array of output destinations, each with apathpropertypostProcess- Optional function receiving the current mode ("dark"or"light")
Advanced output options:
"outputs": [
{
"path": "~/.config/myapp/themes/noctalia.conf",
"input": "myapp-alternate.conf" // Override input for this output
}
]
Additional flags:
dualMode: true- Template contains both dark and light theme patterns (e.g., zed.json)strict: true- Use strict mode for palette generation (preserves custom surface/outline values)
Once registered:
- The template will automatically appear in Settings > Color Scheme > Templates.
- The UI will automatically show the target path in the tooltip.
- The state (enabled/disabled) is automatically saved.
Multi-Client Applications
Some applications have multiple variants (e.g., Discord forks, VS Code variants). Use the clients array pattern:
{
"id": "discord",
"name": "Discord",
"category": "misc",
"input": ["discord-midnight.css", "discord-material.css"],
"clients": [
{ "name": "vesktop", "path": "~/.config/vesktop" },
{ "name": "webcord", "path": "~/.config/webcord" },
{ "name": "equibop", "path": "~/.config/equibop" }
]
}
For multi-client apps:
inputcan be an array of template files (generates multiple themes per client)clientsarray defines the different application variants- Each client has a
name(identifier) andpath(config directory) - Clients are auto-detected by
ProgramCheckerService- only detected clients receive themes
Existing multi-client apps:
- Discord - vesktop, webcord, armcord, equibop, equicord, lightcord, dorion, vencord, betterdiscord
- Code - code (VS Code), codium (VSCodium)
- Emacs - doom, modern (~/.config/emacs), traditional (~/.emacs.d)
Template Categories
Use the category property to organize your template in the settings UI:
| Category | Examples |
|---|---|
system | GTK, Qt, KDE |
terminal | Automatically assigned for terminals array |
launcher | App launchers |
browser | Web browsers |
editor | Code editors |
audio | Music players, visualizers |
compositor | Hyprland, Niri, etc. |
misc | Everything else |
How Color Generation Works
Noctalia uses template-processor.py to handle all color generation and template rendering.
1. Wallpaper Analysis
When “Wallpaper Colors” is enabled, the processor analyzes the current wallpaper image using:
- Quantization: Extracts dominant colors using the Wu quantizer (same as Android/Matugen)
- Scoring: Ranks colors based on chroma and population to find the best seed color
- Palette Generation: Creates a full palette from one or more seed colors
2. Predefined Schemes
When using a predefined scheme (e.g., Nord, Dracula), the processor:
- Loads the scheme’s core colors
- Generates the missing Material Design 3 tokens to ensure a complete palette
3. Rendering
The processor parses `` tags, applies any filters, and writes the output files.
Scheme Types
When using wallpaper colors, different palette generation algorithms are available:
| Scheme Type | Description |
|---|---|
| M3-Tonal Spot | Default Material Design 3 algorithm with tonal variations |
| M3-Content | Emphasizes content colors from the source |
| M3-Fruit Salad | More vibrant, varied color selection |
| M3-Rainbow | Full spectrum rainbow-based palette |
| M3-Monochrome | Single-hue variations for minimalist themes |
| Vibrant | Maximizes saturation for bold colors |
| Faithful | Stays closer to source image colors |
| Muted | Desaturated, subtle color palette |