Sable themes

Official theme packages for Sable. This repo is split into two top-level folders:

Folder	Contents
themes/	Full themes: each basename has {name}.sable.css + {name}.preview.sable.css.
tweaks/	Optional overlays: one {name}.sable.css per tweak (no preview file).

catalog.json at the repo root lists theme pairs and tweaks for the client (regenerated by CI).

---

Tweaks (tweaks/*.sable.css)

Tweaks are single-file CSS overlays: they stack on top of whichever full theme is active. There is no .preview.sable.css. The app loads the full file once, parses metadata from it, caches the CSS, and shows a text description in the catalog instead of a color swatch.

Add one file per tweak under tweaks/ (e.g. tweaks/my-tweak.sable.css).

Metadata: @sable-tweak

The first block comment containing @sable-tweak is parsed:

/*
@sable-tweak
id: my-tweak
name: Human Readable Name
description: One line explaining what changes (shown in the catalog).
author: Your Name
tags: comma, separated, keywords
*/

CI will regenerate the catalog.json. Do not modify it.

---

Themes (themes/)

1. Full theme file: themes/{basename}.sable.css

• Define the full set of --sable-* / --tc-* custom properties your design needs.
• You may use any valid CSS. Sable injects the file as a stylesheet when the theme is applied.

2. Preview file: themes/{basename}.preview.sable.css

The in-app preview card (settings catalog, favorites, chat embeds) does not load this file as a full stylesheet. Sable parses it and only applies a limited set of custom properties to a small UI sample (“Sample text”, Primary, Surface chips).

Include only these properties and the metadata block in the preview file. The client allowlists exactly these names, anything else is ignored.

Property	Role in the preview strip
--sable-bg-container	Background of the preview panel
--sable-bg-on-container	Text on that background
--sable-surface-container	“Surface” chip background
--sable-surface-container-line	Panel border
--sable-surface-on-container	Text on surface chip
--sable-primary-main	“Primary” chip background
--sable-primary-on-main	Text on primary chip

Use a .sable-theme-preview { ... } block so the file stays readable; only those lines matter to the parser.

3. Metadata block

Put this first in the preview file (and mirror the same block in the full .sable.css). The first block comment that contains @sable-theme is parsed.

/*
@sable-theme
id: my-theme-id
name: Human Readable Name
author: Your Name
kind: light
contrast: low
tags: comma, separated, keywords
fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/my-theme.sable.css
*/

• kind: light or dark.
• contrast: low or high.
• fullThemeUrl: Raw URL to the full file under themes/ (used when linking from preview to install).

Adjust fullThemeUrl to match this repo layout: …/main/themes/{basename}.sable.css once the files are on main.

CI will regenerate the catalog.json. Do not modify it.