2 min read

Building a Custom Theme in Deckle

Generate a complete, coordinated Deckle app theme from a single seed color, using the same color-science approach behind Google's Material Design 3.

Pick one color, and get a complete, coordinated app theme, not just an accent color swapped into an existing design, but every background, border, and text color generated to work together from that single starting point, right alongside Deckle's other Settings.

What You Can Do

  • Generate a full theme from one seed color and a light or dark mode choice.
  • Preview it live before saving, then edit or delete it later.
  • Save as many custom themes as you want, alongside the 6 built-in ones.

How to Build a Custom Theme

  1. In Settings → Appearance, click Build a Theme.
  2. Pick a seed color (by hue and chroma) and choose light or dark mode.
  3. Give it a name and save. It appears alongside your built-in theme options from then on.
  4. Edit or delete it any time from the same Appearance screen.

How the Color Generation Actually Works

Deckle uses the same HCT (Hue, Chroma, Tone) color model behind Google's Material Design 3, generating a complete set of coordinated colors from your one seed:

  • Primary: your exact seed color.
  • Secondary: the seed's hue shifted 120° in HCT space, at reduced chroma, genuinely distinct from Primary, not just a lighter or darker version of it.
  • Tertiary: shifted 240°, at even lower chroma, a muted accent.
  • Neutral / Neutral Variant: your seed's hue at very low chroma, used for backgrounds, panels, and borders, so the whole interface reads as "your" theme even in places that aren't obviously colored.
  • Error: a fixed, always-clearly-red hue, independent of your seed, so error states never blend into your color scheme.

Every background, border, text, and accent color in the app is generated from these, rather than being individually hand-picked.

A Couple of Things Worth Knowing

💡 One seed color drives the entire theme, not just an accent. This is why a custom theme looks coordinated rather than like a single color pasted onto an existing design.

💡 Error/danger colors stay a fixed, clearly-red hue regardless of your seed, so a warning never accidentally blends into a theme built around, say, a red seed color itself.

FAQ

Do I need to pick every color individually to build a custom theme?

No, one seed color and a light/dark choice generates the complete theme automatically.

Can I have more than one custom theme saved at once?

Yes, save as many as you want, and switch between them (and the 6 built-in themes) freely from Settings → Appearance.

Will my error/warning colors still be visible in a theme built around a similar color?

Yes, error red is generated independently of your seed color specifically so it never blends in.