Create your own theme

What a theme is

WebF1 Pad’s colors are CSS variables: each built-in theme (Dark, Black, Light) defines a set of custom properties like --bg (window background), --text (body text) or --accent (the highlight color used by selection, buttons and links). Everything in the app - the editor, the preview, the chat and the menus - reads those same variables, so overriding them restyles the whole app at once.

A custom theme is a small JSON file that overrides some (or all) of those variables:

{
  "version": 1,
  "name": "Midnight Copper",
  "mode": "dark",
  "vars": {
    "--bg": "#101014",
    "--bg-raised": "#16161d",
    "--text": "#e8e4dc",
    "--accent": "#c97a4a"
  }
}

• version - the theme format version. Importing refuses files whose version is newer than your app understands, so a theme never half-applies with unknown variables.
• name - shown in Settings. Re-importing a file with the same name replaces the previous copy.
• mode - the base built-in the theme sits on: dark or light (Black is accepted too). Custom themes do not follow the OS light/dark switch - they are fixed to their mode.
• vars - the overrides. Only the names WebF1 Pad knows are applied; anything else is ignored at import, which keeps a typo or an unknown key from breaking anything.

Importing a theme

1. Settings → Theme → Custom themes → Import theme…
2. Pick the theme’s .json file.
3. Select Custom in the theme row (or press Apply on the theme in the list).

Imported themes live in a themes/ folder inside WebF1 Pad’s data directory - plain files you can back up or share.

Starting from a built-in

The easiest way to write a theme is to start from an existing one. In Settings → Theme, use Dark template, Black template or Light template to download a JSON copy of that built-in with every variable filled in, then edit the values and import it back.

The variables that matter most:

Variable	Used for
--bg, --bg-raised	Window and panel backgrounds
--text, --text-muted, --text-faint	Text hierarchy
--border, --border-strong	Lines and separators
--accent, --accent-hover, --accent-soft, --accent-contrast	Buttons, links, selection, checkboxes
--code-bg, --preview-bg, --preview-text	Code blocks and the markdown preview
--scrollbar, --scrollbar-hover	Scrollbars
--shadow-pop, --shadow-float	Menus and floating panels

Good to know

• Your accent color is baked into downloaded templates; edit the four --accent* values to rebrand a theme completely.
• Syntax highlighting in code tabs follows the theme automatically (keywords use --accent, strings use --text-muted, and so on). PDF export keeps using your separately-chosen accent color from Settings.
• If a theme file breaks (invalid JSON, wrong version), it shows as unusable in the list with the reason - delete it or fix the file and re-import.