Themes and styling

You can change how Tiledash looks at three levels: a whole screen, a whole dashboard, and a single tile. Each level overrides the one before it.

The built-in themes

Most come as a family with a light and a dark theme, which look alike in different light.

Nocturne (Dark and Light): glass over a slow aurora, and devices that are on glow warm. Nocturne Dark is the default.
Midnight: true black for wall tablets at night. There is no glass, and it is easy on slow screens.
Daylight: warm and bright for sunny rooms, with crisp white cards.
Aurora: a vivid violet night sky behind deep frosted glass.
Paper (e-ink): black on white with no motion, for e-ink screens.
Switchboard (Light and Dark): practical and dense, with flat cards, a light-blue accent and amber when on.
Tonal (Light and Dark): soft tonal tiles with big round corners, where a light that is on fills yellow.
Glasshouse (Light and Dark): frosted tiles over a soft wallpaper, where a tile that is on turns bright.
Orbit (Light and Dark): clean cards with a hint of colour in the corner.
Lumen (Light and Dark): a room where the colour comes from the lights.
Halo (Light and Dark): big, round, borderless cards with one bold blue.
Signal (Light and Dark): cool white or deep navy with a cyan accent.
Ember Lodge: a cabin at night, with walnut cards, firelight from below and a soft serif.
Graphite: an instrument panel, with flat matte tiles, signal colours and a lit strip when on.
Bridge: a starship console, with black, rounded elbows and tall peach type.

Each theme sets colours, type, corners and depth. Widgets pick them up on their own, so every widget, including your own, follows the theme.

The Themes page

Themes in the sidebar lists your own themes, the ones you installed from the store and Tiledash’s, each with the dashboards that use it. Click a theme’s picture to see the whole app in it; a bar at the top then offers Use on this device, Use on dashboards… or Cancel. Each card has the same choices: Use on this device, and in its ⋯ menu Use on dashboards…, which ticks the dashboards that should wear it. Untick a dashboard to let it follow the device’s theme again.

Set a theme for a device

Open your name at the bottom of the sidebar and choose This device…. Pick a theme, and a Motion level if you like, then apply. The choice is kept in that browser only, so the kitchen tablet can stay dark while your laptop is light.

Automatic follows the device: Nocturne Light or Dark, whichever the device is set to.

Set a theme for a dashboard

A dashboard can carry its own theme, which wins over the device’s. Open the dashboard menu, choose Dashboard settings…, then Look › Change…. The dialog shows your own tiles in every theme, and the dashboard behind it previews your choice. Use this theme applies it.

This is how a sleep dashboard can be Midnight while the rest follow the device. On a wall panel, each dashboard keeps its own theme as you swipe.

Style a single tile

In edit mode, select one or more tiles and choose Style in the toolbar, or Style… in a tile’s menu. The Style panel stays open while you click other tiles, and changes show at once. With several tiles selected, it changes all of them and shows Mixed where they differ.

Shape: corners, all at once or one at a time, plus the border and shadow. Round outer corners only squares the inner corners of a selected block, so a group reads as one shape.
Colour: the background (theme, colour, gradient or none), frosted glass, glow while on, and an accent that recolours sliders and highlights.
Content: padding, where the content sits, and a size from 80 to 140 per cent.
A card behind it turns the whole frame off, so only the content shows.

Back to theme puts the tile back to how the theme draws it. Copy style and Paste style move a look from one tile to others.

Presets

When you like a look, save it. On the Presets tab, choose Save as preset… and name it. Applying a preset links a tile to it, so changing the preset changes every tile that uses it, on every dashboard.

If you change a linked tile, the panel says what changed and offers Back to preset and Update preset. Unlink, keep this look detaches the tile without changing how it looks. Deleting a preset leaves its tiles looking as they did. You can keep up to 50 presets.

CSS for one tile

The CSS tab is a small editor for CSS that reaches only that tile. The widgets’ documented class names are .big, .name, .label, .hint, .head, .icon, .badge and .state, and :host is the widget itself. The tab lists them, and choosing one adds an empty rule.

The editor checks your CSS as you type, with the line of any problem. It refuses things that could load from outside or escape the tile, such as url(), @import, @font-face, position: fixed and selectors for the page. A tile holds up to 4,000 characters, and while there is a problem the tile keeps the last CSS that worked.

Tile styles, presets and tile CSS are free on every plan.

Your own themes

In either theme picker, Your themes lists the themes you made, each with Edit, and New theme opens the editor. You start from any built-in theme except Paper, pick five key colours and let the rest follow, or go on to every colour, gradients, corners, shadows, frosted glass, fonts, motion and CSS of your own. Fonts can come from Google Fonts, copied to Tiledash’s own servers, so your screens never ask Google for anything.

Make your own theme explains the editor section by section, and what every colour and setting does.