Title here
Summary here
Themes
Themes change the color scheme of Overseer’s interface. A theme is a CSS file that sets :root custom properties, packaged in a plugin.
Creating a theme
Create a plugin directory in your Plugins directory with a manifest.json and a CSS file.
Directory structure
@myname/dungeon-theme/
manifest.json
dark-dungeon.cssManifest
{
"id": "@myname/dungeon-theme",
"name": "Dungeon Theme",
"version": "1.0.0",
"author": "Your Name",
"themes": [
{
"id": "dark-dungeon",
"label": "Dark Dungeon",
"src": { "$ref": "dark-dungeon.css" }
}
]
}Each theme entry has:
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier for this theme. |
label | string | Display name in Settings > Theme. |
src | object | Reference to the CSS file: { "$ref": "filename.css" }. |
CSS file
Set :root custom properties to define your colors:
:root {
--color-base: #1a1a2e;
--color-base-accent: #2d2d44;
--color-base-highlight: #0f0f1a;
--color-base-content: #e0e0e0;
--color-primary: #16213e;
--color-primary-accent: #1a3a5c;
--color-primary-highlight: #0a1628;
--color-primary-content: #ffffff;
--color-secondary: #1a1a2e;
--color-secondary-accent: #2d2d44;
--color-secondary-highlight: #0f0f1a;
--color-secondary-content: #c0c0c0;
--color-background: #0f0f1a;
--color-foreground: #1a1a2e;
--color-content: #e0e0e0;
}Restart Overseer. Your theme appears in Settings > Theme.
CSS custom properties
Each color group has four variants: a base color, an accent shade, a highlight shade, and a content color for text on that background.
Base
Used for main canvas surfaces, tile backgrounds, and general UI panels.
| Property | Description |
|---|---|
--color-base | Base surface color. |
--color-base-accent | Accent variant (borders, separators, hover states). |
--color-base-highlight | Highlight variant (selected or focused surfaces). |
--color-base-content | Text color on base surfaces. |
Primary
Used for interactive elements, buttons, active states, and accent highlights.
| Property | Description |
|---|---|
--color-primary | Primary surface color. |
--color-primary-accent | Accent variant (hover states, emphasis). |
--color-primary-highlight | Highlight variant (pressed or active states). |
--color-primary-content | Text color on primary surfaces. |
Secondary
Used for secondary actions, selection indicators, and badges.
| Property | Description |
|---|---|
--color-secondary | Secondary surface color. |
--color-secondary-accent | Accent variant. |
--color-secondary-highlight | Highlight variant. |
--color-secondary-content | Text color on secondary surfaces. |
Global
Used for the overall page background, foreground panels, and default text.
| Property | Description |
|---|---|
--color-background | Page background color. |
--color-foreground | Foreground surface color (panels that sit on the background). |
--color-content | Default text color. |
Starting point
The built-in theme uses neutral grays for base, a violet accent for primary, and fuchsia for secondary. Use this as a baseline when building your own theme – replace the color values with your palette:
:root {
--color-base: #3f3f46;
--color-base-accent: #52525b;
--color-base-highlight: #27272a;
--color-base-content: #fafafa;
--color-primary: #7c3aed;
--color-primary-accent: #6d28d9;
--color-primary-highlight: #a78bfa;
--color-primary-content: #ffffff;
--color-secondary: #c026d3;
--color-secondary-accent: #a21caf;
--color-secondary-highlight: #f0abfc;
--color-secondary-content: #ffffff;
--color-background: #09090b;
--color-foreground: #27272a;
--color-content: #ffffff;
}Multiple themes in one plugin
Add multiple entries to the themes array, each pointing to a different CSS file:
{
"id": "@myname/dungeon-themes",
"name": "Dungeon Themes",
"version": "1.0.0",
"themes": [
{
"id": "dark-dungeon",
"label": "Dark Dungeon",
"src": { "$ref": "dark.css" }
},
{
"id": "torchlit-dungeon",
"label": "Torchlit Dungeon",
"src": { "$ref": "torchlit.css" }
}
]
}Both themes appear as separate options in Settings > Theme.