Themes and Backdrops

Themes and Backdrops

The twelve presets

Six light, six dark. No two share a hue.

Light	Dark
Iron Man · crimson + gold	Black Panther · violet
Captain America · navy + red	Loki · emerald + gold
Doctor Strange · teal + crimson	Hulk · lime + purple
Star-Lord · burnt orange + teal	Thanos · gold + purple
Vision · gold + magenta	Venom · monochrome
Scarlet Witch · rose + deep red	Winter Soldier · steel blue

Each ships its own stylesheet, and only the selected one is ever loaded.

In the light presets the cards stay neutral and the character shows through headers, number cards and the sidebar — a screen of saturated cards is tiring to work in all day.

How a palette is built

A theme is a set of roles rather than one colour with shades derived from it:

Role	Used for
canvas	the page
surface / surface_alt	cards, sidebar, table headers
on_canvas / on_surface	text, chosen per surface
muted, border	secondary text, hairlines
primary / secondary / on_primary	the brand pair and text on it

Light and dark follow different rules, because one formula cannot serve both. In dark, cards must be lighter than the page — elevation there comes from light, not shadow. Every palette is checked against that and against a 4.5:1 contrast floor before it ships.

Backdrops

The background behind the desk. Each preset has one drawn for it, built from that preset's own two colours:

Preset	Backdrop
Iron Man	arc-reactor rings under armour plating
Captain America	the shield's concentric bands
Doctor Strange	a sling-ring portal, slowly turning
Star-Lord	retro scanlines over a starfield
Vision	the mind stone's halo
Scarlet Witch	chaos magic, a slow swirl
Black Panther	vibranium weave under a vignette
Loki	Asgardian chevrons
Hulk	a gamma burst
Thanos	deep cosmos with the gauntlet's ring
Venom	symbiote tendrils
Winter Soldier	brushed metal and the red star

Doctor Strange, Scarlet Witch, Thanos, Loki and Vision drift slowly; the rest are still by design. The motion is composited rather than repainted, and it stops when the browser asks for reduced motion.

Two switches in Swift Theme Settings govern all of it:

• Enable Backdrops — on by default. Off gives a plain, flat background.
• Show Backdrop Through Panels — off by default. On makes cards, the sidebar and table headers translucent so the backdrop reads through the desk instead of only showing in the gaps. Menus, modals and the child-table editor stay opaque, because they have to stay readable.

No images are shipped for any of this — it is CSS plus one inline SVG, so there is nothing extra to download.

Custom Colors

If none of the twelve fit, switch Color Mode to Custom Colors and give it a primary and a secondary colour. It works out canvas, cards, the text for each surface, muted text, borders and accent states.

Two more choices it cannot read off a hex code:

• Custom Mode — Light or Dark
• Colour Strength — Subtle keeps cards neutral and puts the colour in the accents; Bold gives the cards the brand tone

If you pick a colour where neither black nor white is quite legible on it, it is nudged a percent or two until one is.

In this mode the Backdrop field becomes your choice — Aurora, Mesh, Grain, Facets, Silk or None. In preset mode it is ignored, because the preset brings its own.

Who can change the theme

Restricted to Administrator and System Manager, enforced on the server rather than only hidden in the UI.

Enable Theme Switcher governs all three places a theme can be changed: the navbar chip, Frappe's own Switch Theme dialog, and the command palette. Turning it off closes all three.

Saving Swift Theme Settings applies immediately in every open desk session.