Your own CSS in a theme

For what the settings of your own theme don’t reach, a theme can carry CSS of its own.

Your own CSS

For what has no setting, the last tab, 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.

Hook	What it is
`.hd-widget-frame`	Every tile’s frame: its background, border, corners and padding.
`.hd-widget-frame.lit`	The frame while what it shows is on.
`.hd-widget-frame[data-kind='light']`	The frame of one kind of tile (see below).
`.hd-widget-frame[data-on='true']`	The frame while what it shows is on, as `.lit`.
`.hd-widget-chart` and `.hd-widget-map`	The chart and the map behind a tile.
`.big`	The big number or title in a widget.
`.name`	What a widget shows, such as a device’s name.
`.label` and `.hint`	Small text.
`.head`	The row with the name and the icon.
`.icon`, `.badge` and `.state`	The icon, the badge and the state text.
`:host`	The widget itself.

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

A tile’s kind is the first part of its widget’s type: light, climate, sensor, security, alarm, energy, media, history, flow and so on. Widgets of your own are own, and widgets from the Community are community. To give kinds of tiles a shadow or a bar of their own, set the variable rather than box-shadow itself, so a tile that is on still glows: .hd-widget-frame[data-kind='climate'] { --hd-shadow: inset 14px 0 0 #ff9966; }.

/* 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 on the Type tab.
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.

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.

Theme	What makes it that way
Tiledash Dark	A flat true black page with solid warm-grey tiles and no glass, grain or shadow. Space Grotesk for numbers and text, Space Mono for capital labels, a signal-orange accent and an ice-blue glow around lit devices.
Tiledash Light	The same on flat white, with darker orange and ice so both read on white, and a soft shadow under the tiles.
Nocturne Dark	See-through tiles over a slow mint and blue aurora with silk drifting behind them and stars at night, 18 px of frosted glass, grain, squircle tiles and icon chips, two-tone icons, only a warm amber glow around lit devices and capital labels with wide spacing.
Nocturne Light	The same glass and grain in daylight colours, with a green-teal accent and frosted white tiles.
Midnight	A true black page with a faint blue glow at the top, solid tiles, no glass, no grain, no shadow, dimmer text and an ice-blue accent. Its motion is a little slower, and it is kind to slow screens.
Daylight	Solid white cards on a warm cream page, a terracotta accent, rounder corners, bolder numbers and sentence-case labels.
Aurora	A violet, magenta and blue night sky behind deep frosted glass with 28 px of blur, a pink accent and a golden lit colour.
Paper (e-ink)	White with black 2 px borders, black text and a black accent. No shadow, blur, grain or motion. Every state colour is black, and the charts use black and greys.
Switchboard (Light, Dark)	Flat cards with a thin hairline, no shadow or glass, tight 12 px corners and small gaps, a light-blue accent, and no glow around lit devices.
Tonal (Light, Dark)	Tonal tiles with no border or shadow and 28 px corners. A lit tile fills solid yellow instead of glowing.
Glasshouse (Light, Dark)	Frosted glass with 30 px of blur over a colourful wallpaper, and no border. In the light theme a lit tile fills with amber and icons sit in circles; in the dark theme it lifts to lighter glass.
Orbit (Light, Dark)	Solid cards with a thin border and a soft shadow, a faint wash of colour in the top corner, bold numbers and a blue accent.
Lumen (Light, Dark)	A neutral room with a soft wash of colour in the corner, light frosted tiles that fill warm when on, and a black or white accent.
Halo (Light, Dark)	Big round cards with no border, shadow or glass on airy grey or true black, and one bold blue accent.
Signal (Light, Dark)	Solid cards with a thin border on cool white or deep navy with a soft glow at the top, a cyan-blue accent and modest corners.
Ember Lodge	Walnut cards with a little glass over firelight rising from below, a moss-green accent, an orange lit colour and a soft serif for the numbers.
Graphite	A blueprint grid behind outlined tiles with small cut corners, no shadow or glass, an orange accent, bold icons in squares, condensed capital labels, and a ring and a signal-yellow strip along the bottom of a tile that is on.
Bridge	A pure black page, a thick lavender bar down the side of every tile that turns gold when on, 32 px corners, an orange accent and tall condensed type in peach capitals.