Make your own theme

A theme is everything that decides how Tiledash looks: the colours of the background, tiles, text and lights, the shape of the corners, how much shadow and frosted glass there is, which fonts the numbers use, and how fast things move. The built-in themes are ready-made sets of those choices. Your own theme is a set you shape yourself, and every dashboard, tile and widget, including the ones you write, follows it without any extra work.

This page walks through the theme editor in the order it shows its sections, and says what every colour and setting paints. Themes and styling covers the built-in themes and how to choose one.

Where a theme applies

You choose a theme in three places, and each one wins over the one before it:

• This device: open your name at the bottom of the sidebar and choose This device…. The theme is kept in that browser only. It styles the app itself, including the sidebar, and every dashboard that has no theme of its own.
• A dashboard: open the dashboard menu, choose Dashboard settings…, then Look › Change…. A dashboard’s theme wins over the device’s.
• A wall panel has no theme setting of its own. Each dashboard on it keeps its own theme as you swipe, and a dashboard without one follows the theme of the screen the panel runs on. On an e-ink panel everything is drawn in Paper, whatever the dashboard’s theme.

A single tile can still override the theme in its Style panel. The theme is what every tile starts from.

Both pickers list your themes under Your themes, each with an Edit button, and a New theme card that opens the editor.

Themes in the sidebar has a page of its own: your themes, the ones you installed from the store and Tiledash’s, each with the dashboards that use it and whether this device does. Choose one of yours to open it in the editor, or a store theme to see its page in the store. New theme starts one. When you make a new theme from a picker, it becomes the dashboard’s theme, or this device’s, as soon as you first save it.

The screen has the last word on motion. Its Motion setting only ever turns movement down, so a theme set to full motion can still be calm on a slow tablet.

Start from a built-in theme

At the top of the editor are two fields. Name is what you see in the pickers. Starts from is the built-in theme your new theme begins as: Nocturne Dark, Nocturne Light, Midnight, Daylight or Aurora. Paper is not on the list, because e-ink is a property of the screen, not of a look.

Choose Starts from first. Changing it later starts again from the new theme, and your changes so far are dropped, although the name stays.

What a new theme takes from its starting theme:

• the five key colours, read as plain colours,
• the shape, depth, type and motion settings,
• the six chart colours, the price colours and the fonts,
• whether it is a light or a dark theme.

Where a built-in theme uses a translucent colour or a gradient, such as Nocturne’s glass tiles and the aurora behind them, your new theme begins with a plain stand-in colour for it. The frosted-glass blur and grain are kept, and you can make the background or tiles a gradient yourself, as described below.

The editor shows a preview as you work: a small app with a sidebar and a dashboard of live tiles, plus a button and a badge, all drawn in your theme. Nothing you do changes a real dashboard until you save and choose the theme.

Quick start: five key colours

The Quick start section holds five colours. The rest of the theme is worked out from them, so you can make a consistent theme without touching anything else. Each colour has a colour picker and a hex code field, such as #ff7a59.

Background, tiles and accent can each be a gradient instead of a colour. See Gradients and glows.

The editor checks your choices and tells you, calmly, when something is hard to read. Text on tiles and Text on the background need a contrast of at least 4.5 to 1, and Accent on tiles needs at least 3 to 1. The note shows the ratio it measured. It never stops you from saving.

All colours

All colours lists every colour of the theme in four groups, then the chart lines. A colour that is made from a key colour shows a dashed swatch and a line such as “Made from the text, changes with it”, until you press Set it and pick your own. Once you have, Make it from the text again puts it back. The five key colours are always plain colour fields: changing one here changes the key itself, and everything made from it follows.

Background and tiles

Text

Accent and states

Controls

Charts

Line 1 to Line 6 are the colours of charts and series, used in order. They start as the starting theme’s colours and are yours to change. If you want the first line to match your accent, set Line 1 to the same colour, and check it again whenever you change the accent. Pick six colours that look different from each other, including for someone who does not see colour well.

Price colours

Energy widgets and price bars paint cheap, normal, expensive and below-zero hours with four price colours, --hd-price-cheap, --hd-price-normal, --hd-price-high and --hd-price-negative. The editor has no fields for them: your theme keeps the price colours of the theme it started from. Your own CSS can set the variables on the tiles if you want others.

Gradients and glows

The background, the tiles and the accent are each one row, with a colour swatch and a button, Make it a gradient. Pressing it opens a small editor with three choices:

• Colour: one flat colour.
• Gradient: a straight blend. Direction turns it from 0 to 359 degrees.
• Glow: a round blend that fades out from a point near the top left, good for a soft spot of light.

A gradient has two to six colours. For each one you set the colour and Where colour 1 sits, from 0 to 100 per cent of the way across. The button on each colour adds the same colour again as the next step, which is the quickest way to a smooth blend: duplicate, then nudge the new one. A colour adds one at the end, and the remove button takes one away while at least three are left. Colour folds it back to a flat colour.

A few things to know:

• A gradient background paints the whole page, and a gradient on Tiles paints every tile.
• Accent as a gradient paints primary buttons, flow tiles and filled dashboard buttons. Small accent details, such as a slider’s fill and the focus ring, stay a flat colour.
• The average colour of a gradient becomes the key colour that borders, menus and the contrast check follow, so the theme stays consistent.
• Borders, text and the other colours stay flat colours, because gradients rarely read well there.

Gradients in big numbers

Big numbers in the Type section works the same way. A gradient there is painted through the letters of every big number and title, so a temperature can fade from one colour to another. Give it enough contrast at both ends against the tiles, because a number is hard to read the moment one end of the gradient blends into the tile.

Sidebar and app

The Sidebar and app section colours the app’s own chrome. Each field has a default that follows the theme until you set it.

On small screens the sidebar slides over the page as a drawer, and without a background of its own it takes the Menus and dialogs colour, so the page does not show through it.

The sidebar belongs to the app, so it follows the theme chosen under This device…, not a dashboard’s own theme. Your theme’s own CSS never reaches the sidebar, the top bar or the logo.

Shape

Shape sets how tiles and controls are cut. Every slider shows its value.

A dashboard’s own spacing, set in its settings, still wins over the theme’s.

Sharp corners and a small gap look dense and technical, and large corners with more room look softer.

Depth

Depth decides how much a tile lifts off the page.

Frosted glass is the most demanding effect for a screen to draw. It suits a laptop, but a slow wall tablet can struggle with it, which is why Midnight has none. If a screen feels slow, try the theme with Frosted glass off.

Type

Type has two font pickers, one weight slider, one fill and one switch.

• Big numbers and titles: the font of the large numbers and headings, the display font.
• Everything else: the font of labels and running text.
• Big numbers: their colour, or a gradient through the letters.
• Weight of numbers: how bold big numbers are, from 200 to 900 in steps of 100.
• Labels in capitals: small labels in capitals, or as they are written.

Choosing a font

Each picker has two sources. With Tiledash holds the fonts that come with the app, in a list you can scroll: Unbounded, Albert Sans, Roboto, Inter, Figtree, Manrope, Barlow, Young Serif and more, with some monospaced fonts among them. Google Fonts searches the whole Google Fonts catalogue. Type at least two letters, such as “Fraunces” or “Space Grotesk”, and pick a result. The list shows the first few matches, each in its own letters.

Tiledash copies a Google font to its own servers the first time anyone picks it, which takes about a second. Meanwhile the row says Getting it… and a note under the preview says it will switch in a moment. Everybody who looks at your dashboards then loads the font from Tiledash, so your screens never ask Google for anything.

You can add up to 20 new Google font families a day. A family that is already copied never counts, including one you picked before. Past the limit the row says Too many new fonts today, and you try again later. If Google does not hand a font over, the row says Couldn’t get it, pick it again, and picking it again tries once more.

Two things the editor does not offer: the monospaced font of small labels stays the one of the theme you started from, and the width and letter spacing of numbers and labels come from the theme you started from. Your own CSS can still change them.

A font with a wide range of weights, such as a variable font, makes Weight of numbers worth using. A font with only a regular and a bold has fewer steps, and the browser picks the nearest. The font you pick also falls back to a generic one while it loads: sans-serif, serif, monospace or cursive, depending on the kind of font.

Motion

Motion has two settings.

• Movement: Full or Calm. Full lets numbers count and tiles slide. Calm keeps the fades and drops the movement and the counting.
• Speed: how long a change takes, from 80 to 800 ms. The quicker and slower changes are set from it.

The theme sets what moves, and the screen has the last word. This device’s Motion setting, Like the device, Full, Calm or None, can only turn motion down from what the theme asks for. A theme set to Calm stays calm even on a screen set to Full.

E-ink screens never move. The editor has no None level, because that belongs to Paper and to the screen.

Light, dark and e-ink

Every theme is light, dark or paper, and there is no field for it: your theme takes it from the theme it Starts from. Nocturne Dark, Midnight and Aurora are dark. Nocturne Light and Daylight are light. Paper cannot be a starting point.

This matters for more than colours. It decides what colours alone cannot, such as whether a map is drawn in light or dark tiles, and how the alert screens look. Choose a starting theme with the right appearance before you spend time on colours.

On an e-ink panel, Tiledash does not use your theme at all. It switches to Paper: pure black on white, with black borders and no shadows, glows, gradients or blur. Paper sets --hd-flat to 1, so widgets drop their colours and show black and white only, and your theme’s own CSS is left out. E-ink screens run wall panels with their own E-ink screen setting, and Preview on e-ink in a dashboard’s menu shows you how a dashboard looks there.

Your own CSS

For what has no setting, the last section, Your own CSS, takes CSS for the dashboard and its parts. Use the theme’s variables, all starting with --hd-, and the hooks below. The style variables reference lists every variable and what it means.

The CSS reaches only dashboards that use the theme, and stays inside the dashboard’s area. It is also adopted by every widget in that theme, in its own Shadow DOM, so .big { … } reaches the numbers inside tiles.

Other class names inside a widget can change with the widget, so rely on these.

/* A thin accent line round every tile */.hd-widget-frame {  outline: 1px solid color-mix(in oklab, var(--hd-accent), transparent 60%);  outline-offset: -1px;}/* Warm it up when the device is on */.hd-widget-frame.lit {  outline-color: var(--hd-lit);}/* Tighter big numbers */.big {  letter-spacing: -0.04em;}

What your CSS cannot do

The editor checks your CSS as you type and says what is wrong, and the server checks it again when you save. These are refused:

• url() and anything else that loads from outside, @import, and @font-face. Fonts are added in the Type section.
• At-rules other than @media, @container, @supports, @keyframes, @starting-style and @layer.
• Script in any form: expression(), javascript: and behavior.
• Anything that reaches the page itself, such as :root, html and body. Style the dashboard and its parts.
• position: fixed. A theme stays on the dashboard. static, relative, absolute and sticky work.
• HTML tags, and CSS of more than 20,000 characters.

While there is a problem, Save theme is disabled and the preview keeps the last CSS that worked. Anything your CSS moves outside its area is cut off at the edge, so it cannot cover the sidebar or the logo. @keyframes only work inside widgets.

Save, change and delete

Save theme (or ⌘S, Ctrl+S on Windows and Linux) is only available with a name, and while your CSS has no problems. Saving keeps the editor open, a message says the theme is saved, and the button reads Saved until you change something again. While there are changes, the footer says Not saved yet. Close goes back to where you opened the editor, and with unsaved changes it asks Leave without saving?, with Keep editing and Leave without saving. The browser’s back button asks the same.

Delete theme asks first and cannot be undone. Dashboards that used it go back to the theme of the screen they are shown on. You can keep up to 50 themes.

What the built-in themes do

The built-in themes are good examples of how a few settings give a very different feel. Start from one that is close to what you want.

Tips for a theme that works

• Start with the five key colours and look at the preview before opening All colours. Most themes need little more.
• Check contrast on the screen it will run on. A tablet in a sunny hallway is harder to read than your laptop. When the editor warns about contrast, listen to it.
• Keep Lights on warm and the Accent cool, or at least different. “On” and “selected” are different things, and the glow of a lit device should not look like a highlighted control.
• Keep Good, Warning and Danger different from each other and from the accent. They carry meaning, and someone who cannot tell red from green should still tell them apart by brightness.
• Use gradients softly. Two close colours and a long blend look rich, and a hard contrast looks cheap.
• Mind the glass. Frosted glass needs see-through tiles and something behind them. On a solid tile it does nothing but cost speed.
• Test on the wall panel. Open a dashboard in the theme on the real tablet. A theme that looks fine at your desk can feel slow or dim on a wall. Midnight is built for wall tablets at night.
• Check e-ink separately. Your theme never shows on an e-ink screen, so use Preview on e-ink in a dashboard’s menu to see how the dashboard looks there.
• Take colours from the theme in your own widgets. A widget that reads var(--hd-accent) follows every theme, yours included, and a fixed colour does not. Styling explains how.