Theme colours
The colours of your own theme, tab by tab, and what each one paints.
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
| Colour | What it colours | Made from | Tips |
|---|---|---|---|
| Background | The page behind the tiles. | A key colour | Can be a gradient. Keep it calm: the tiles sit on top. |
| Tiles | A tile’s own surface. | A key colour | Can be a gradient. A see-through colour lets the background and blur show through, as in Nocturne. |
| Raised tiles | Parts on a tile that stand out from it, such as a button. | The tiles | Slightly lighter or darker than the tiles reads best. |
| Menus and dialogs | Menus, dialogs and popups over the page. | The tiles | Keep it solid: glass would let the content underneath show through. |
| Borders | The lines around tiles and between parts. | The text | Pair with Border width under Depth. |
Text
| Colour | What it colours | Made from | Tips |
|---|---|---|---|
| Text | Titles, big numbers and body text. | A key colour | Must read on both the tiles and the background. |
| Muted text | Labels and secondary text. | The text | Still has to be readable. It is a label, not decoration. |
| Faint text | The quietest text: hints, units, times. | The text | It may be dim, but not invisible. |
Accent and states
| Colour | What it colours | Made from | Tips |
|---|---|---|---|
| Accent | Active controls, highlights, links and the focus ring. | A key colour | Can be a gradient for filled buttons and flow tiles. |
| Text on the accent | Text and icons sitting on the accent. | The accent | Made as near-black or white, whichever reads better. If you set the accent to a mid tone, check it. |
| Lights on | The warm colour of a device that is on. | A key colour | Keep it warm and distinct from the accent, so “on” and “selected” never look alike. |
| Lights on, soft | The glow that washes a tile whose device is on, from its top-left corner. | The lights on | A weak version of the lit colour. |
| Cool (cooling, water) | The cool counterpart: cooling, cold water. | Starting theme | Pick something distinctly cooler than Lights on. |
| Good | All is well: locked, closed, cheap. | Starting theme | Usually a green. |
| Warning | Worth a look: a low battery, a door open for a while. | Starting theme | Usually amber. |
| Danger | Act now: smoke, a leak, an alarm. | Starting theme | Usually red. Make it stand out from the warning. |
Controls
| Colour | What it colours | Made from | Tips |
|---|---|---|---|
| Slider and bar tracks | The empty part of a slider, bar or ring. | The text | Faint, so the filled part stands out. |
| Keyboard focus | The outline round whatever has keyboard focus. | The accent | Must be visible on tiles and on the background. |
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 on the Type tab 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.
Background
Background draws something of the theme’s own behind the tiles of every dashboard in it. Choose Plain for just the background colour, a Pattern or a Living scene.
- Pattern: Dots, Grid, Lines, Contours or Blueprint, in a colour of your choice (the borders’ colour until you set one). Strength sets how strongly it shows, Size how far apart its dots and lines are.
- Living scene: Waves, Silk or Glow, moving slowly in the theme’s own colours. Over it adds clouds, rain, snow, mist or stars at night, and Fade blends it towards the background colour so the tiles stand out.
A dashboard’s own wallpaper goes over the theme’s background, and a dashboard’s Look tab can turn it off for that dashboard. Living scenes keep a steady frame rate: a screen that can’t keep up draws them with less movement. E-ink screens leave the background out. Moving backgrounds of the built-in themes work on Free too; making a theme of your own needs Pro.
When on
When on decides how a tile looks while its device is on, such as a lamp that is lit.
| Style | What it does |
|---|---|
| Soft light | A soft wash of the lights-on colour from the tile’s corner. The usual look. |
| Filled | The whole tile turns the lights-on colour, as in Apple Home, with its text and icons on it. |
| Ring | A ring round the tile in the lights-on colour. |
| Edge | A bar of the lights-on colour down the tile’s left side. |
| Glow only | Only the glow around the tile; nothing changes on the tile itself. |
Lights on is the same key colour as in Quick start. With Filled, Text on it sets the colour of text and icons on such a tile; until you set it, Tiledash picks your text or tile colour, whichever reads best. Colours that mean something, such as a green reading or a red price, are darkened towards it, so they still read on the fill. The editor warns when text on a filled tile reads badly. Glow around it gives a tile that is on a warm halo in the lights-on colour.
Charts
Charts sets how every chart in the theme draws: the history, the sparklines and the energy charts.
| Setting | What it does |
|---|---|
| Line width | From 1 to 4 px. |
| Lines | Smooth curves, Straight lines from point to point, or Steps. |
| Fill under lines | How strong the colour under a line is, from none to 150 % of the usual. |
| Grid lines | None, Dashed (the usual) or Solid. |
| Dots | None, the Latest point only, or Every point (on lines with up to 60 points, so they stay apart). |