Theme-maker - a tool for designing themes

I made a custom lovelace card that could help when designing themes:

(this screenshot is from an early prototype)

It lets you try out the effect of various css variables live, and export the yaml when you’re finished.

Also very useful for quickly trying out a new theme. Just click Import/Export, copy the theme into the box and click Load.


One word: AMAZING!!!

Any plans for a gui colour picker for the value field?

And a dropdown list of available keys?

1 Like

At the moment there’s no reliable source of all available keys, so that will have to wait until we’re done with the themeing cleanup.

The color picker is also pretty hard to do, since there are so many ways to specify a color in css…


Do the background properties also support gradients, data uris and other css background settings like positioning and scaling?

1 Like

That is awesome!

the ha-card-background variable is applied to a background CSS property of the cards, so it supports the same things and requires the same syntax.

Is there any place to follow what is happening in this “themeing cleanup”?

BTW: as always, great work!

The #devs_frontend channel on discord.

It’s slow going. Any help is much appreciated - as always.

1 Like

Ahhh - was wondering why my theme seems to break every few updates! Glad to hear there’s work underway to address consistencies :slight_smile: Will check out theme-maker this evening! Thanks again

Seriously! AMAZING. WOW. Great Job

I’am getting this error in my HA log http://************/frontend_latest/26357108de036797f570.chunk.js:4568:431 Uncaught TypeError: Failed to construct ‘CustomElement’: The result must implement HTMLElement interface

What are you using to view the interface? A Fire tablet by any chance?

nah, windows 10 laptop with google chrome.

Then I suggest checking the browser console for more information. See the guide linked from the github page.

Thanks, love the fact that it live updates the color so you can debug really easily.
Just trying to figure out what varible the icons are on the left side menu. Went through them all, but I don’t think my theme doesn’t cover all variables available.

Is there a list available by any chance where all these variables are listed?

Not unless you count the one linked from the readme, unfortunately.

This might be a good start:

1 Like


since some days I noticed I cannot import themes anymore. Variables written into the theme maker manually get reflected in the frontend, though.
Logs throw out this after clicking on import:

2019-07-26 09:38:07 ERROR (MainThread) [frontend.js.latest.201907211] Uncaught TypeError: Cannot read property 'querySelector' of null

I just installed this for the first time.

running HA v96.4

When I try to copy/paste an existing theme into the import window and hit the load button I get no response and it throws the following error into the log:

2019-07-26 13:16:46 ERROR (MainThread) [frontend.js.latest.201907210] Uncaught TypeError: Cannot read property 'trim' of undefined
2019-07-26 13:16:51 ERROR (MainThread) [frontend.js.latest.201907210] Uncaught TypeError: Cannot read property 'trim' of undefined

Any ideas what I’m doing wrong or how to fix it?