Themes and dark mode
KPD can look two ways at once: light or dark, and a look. The look is KPD's own, or a theme the KPD team has turned on, such as Christmas with its string of lights and snow-capped assets. Choose both in View → Theme….
Choosing a look
- Open View → Theme…, or click the look's name at the right of the status bar.
- Under Light or dark, pick Light, Dark or Match system, which follows your computer's setting. The sun / moon button on the toolbar switches between light and dark too.
- Under Look, pick Default or one of the themes shown. Each card is a small picture of KPD in that look.
Every change shows straight away and is remembered in this browser. A theme has its own light and dark colours: Christmas is Snow day in light and Silent night in dark.
Decorations
Some themes add pictures: Christmas hangs lights under the menu bar, puts a hat on the logo and holly by the explorer, caps each asset with snow, and lays a snow drift along the bottom of the canvas with a tree and presents beside the zoom buttons.
- Show decorations switches all of them off while keeping the theme's colours.
- Some themes have things that move: a pattern drifting behind the canvas, or creatures flying about it. Let it move switches the movement off (they stay where they are), and nothing moves if your computer is set to reduce motion.
Catching bats
Halloween at night (Moonlit night) lets a few bats loose behind your design. Click one in open canvas to catch it: it squeaks, spins away and comes back a few seconds later, and Bats caught in the top-left corner of the canvas keeps count in this browser. Bats fly behind your assets, so a click on an asset, a link or a label is always just that, never a catch. They stay out of workshop mode, so they never distract a client.
New Year 2027 at night (New Year’s Eve) stands a row of rockets along the bottom of the canvas, behind your design. Click one to launch it: it climbs, bursts into a firework, a new one takes its place, and Rockets launched in the top left of the canvas goes up. With Let it move off, or if your computer asks for less motion, the firework bursts where the rocket stands instead. By day (New Year’s Day) the rockets rest and streamers take the fireworks’ place.
Decorations never get in the way: they sit behind your design (never over an asset, a link or a label), they can't be clicked, and they're never in an export.
What a theme never changes
- Asset colours. Sources are green, topics blue, Flink purple and so on in every look, so a design means the same to everyone.
- Warning colours. Errors, warnings and problem badges keep their usual colours.
- Exports. PNG pictures, the design document's diagrams, the technical export and Terraform always use the default light look, so they suit documents and slides whatever you work in.
- Your work. Group box colours and shading are part of your design and stay as you set them.
Making a theme
A theme is one .kpdtheme file: data, not code. It holds colours for KPD's light and dark modes and a few SVG pictures for fixed places. It can't run scripts or load anything from the internet, and KPD checks every theme before using it. A theme that fails any check isn't used at all.
Themes are written as a folder in KPD's themes-src/: a theme.json plus the SVG files it names. npm run themes checks each one and builds themes/<id>.kpdtheme.
| Place (decor slot) | Where it's drawn | Christmas uses it for |
|---|---|---|
top | Repeated along the bottom edge of the menu bar | The string of lights (glowing at night) |
back | Tiled behind the design; "fall": true lets it drift down | Not used (snowflakes were tried, and found distracting) |
ground | Along the bottom of the canvas, behind the design | The snow drift |
corner | Bottom right of the canvas, beside the zoom buttons | The tree and presents |
nodeTop | Stretched across the top of every asset | Caps of snow |
logo | Over the KPD logo | A hat |
panel | Beside the Project explorer heading | Holly |
sky | Top right of the canvas, behind the design | Not used (Halloween's moon at night) |
sprites | A few creatures wandering the canvas behind the design: how many, how big, in which modes, whether a click catches one (with a sound KPD makes itself: squeak, pop or none) and the score's label | Not used (Halloween's bats, at night only) |
launchers | A row standing along the bottom of the canvas, behind the design: the picture, the burst shown when one is launched, how many, how big, in which modes, a sound and the score's label. A click launches one | Not used (New Year's rockets, at night only) |
A picture can differ by mode: {"light": "graveyard", "dark": "graveyard-night"}, and null leaves a mode without one (Halloween's moon is {"light": null, "dark": "moon"}).
The colours a theme may set are KPD's interface tokens (backgrounds, the menu bar, text, borders, the accent, the canvas and its dots, notes, shadows), each a plain colour. Fonts, sizes, asset colours and warning colours can't be changed. The Christmas and Halloween themes in themes-src/ are complete examples.
.kpdtheme on the admin site and turns it on, optionally between dates. If you run KPD yourself, drop .kpdtheme files into its themes/ folder (or the folder KPD_THEMES_DIR names) and reload the page; take a file out to unload it.