Themes — Degoog docs

Where themes live

Themes live in data/themes/ (or DEGOOG_THEMES_DIR). Each theme is a folder named by its id (e.g. zen, catpuccin), containing at least a theme.json manifest.

Theme manifest (theme.json)

Required:

name — Display name in Settings → Themes.

Optional:

author, description, version — Shown on the theme card.
css — Path to the stylesheet relative to the theme folder (e.g. style.css or style.scss). SCSS is compiled at load. When the theme is active this file is served at /theme/style.css.
html — Object with keys index, search. Value is the filename in the theme folder (e.g. "index": "index.html"). When the theme is active, that file is served instead of the built-in home or search page. Custom HTML can use placeholders: __THEME_CSS__, __THEME_ATTRS__, __PLUGIN_ASSETS__, __APP_VERSION__.
settingsSchema — Same shape as plugin SettingFields. If present, a Configure button appears on the theme card; values are stored in data/plugin-settings.json under theme-<theme-id>. Theme settings can be exposed as data-* attributes on <html> via dataAttrsFromSettings in theme.json.

Setup

Create data/themes/ (or set DEGOOG_THEMES_DIR). Each theme is a subfolder, e.g. data/themes/my-theme/, with:

theme.json (required)
style.css or style.scss (optional) — Use the app’s CSS variables so light/dark mode work. See Styling for the full list.
index.html, search.html (optional) — Only used if listed under html in theme.json.

The theme id is the folder name.

Applying a theme

Settings → Themes → choose a theme → Apply. The active theme id is stored in data/plugin-settings.json as theme.active.

Examples from the official store

Zen — minimalist theme with theme.json (css, html.index, html.search), style.css, index.html, search.html overrides.
Catppuccin, Pokemon — themes with variants/settings.