Theme-maker - a tool for designing themes

thomasloven · April 10, 2019, 7:57am

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

(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.

Yoinkz · April 10, 2019, 7:58am

One word: AMAZING!!!

tom_l · April 10, 2019, 9:02am

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

And a dropdown list of available keys?

thomasloven · April 10, 2019, 9:13am

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…

reef-actor · April 10, 2019, 9:33am

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

DavidFW1960 · April 10, 2019, 9:49am

That is awesome!

thomasloven · April 10, 2019, 10:03am

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.

capstan1 · April 10, 2019, 10:28am

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

BTW: as always, great work!

thomasloven · April 10, 2019, 10:30am

The #devs_frontend channel on discord.

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

ajoyce · April 11, 2019, 5:48pm

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

Ali_Kiaie · April 12, 2019, 3:11am

Seriously! AMAZING. WOW. Great Job

pedrogense · April 13, 2019, 7:06pm

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

thomasloven · April 13, 2019, 7:08pm

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

pedrogense · April 13, 2019, 7:40pm

nah, windows 10 laptop with google chrome.

thomasloven · April 13, 2019, 7:41pm

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

Vasco · May 27, 2019, 12:25pm

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?

thomasloven · May 27, 2019, 12:48pm

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

Vasco · May 27, 2019, 10:06pm

This might be a good start:

github.com

chipriley/lovelace-css-values/blob/master/known_css_refs.md

# Known Lovelace CSS Elements
The following are known CSS values that can be modified via a theme.yaml file or through various custom cards/components to customize Lovelace.  I have attempted to break them out into sections based on what they modify but please submit changes if you think there could be a better way to organize it.

Sources:

[ha-card.ts](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/ha-card.ts)  
[ha-style.ts](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.ts)  
[style.ts](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/styles.ts)  
[Various Themes from Home Assistant Community Themes](https://github.com/maartenpaauw/home-assistant-community-themes/)  


## Card-Specific Modifications
| Element | Example Value | HA Version | Description
| ---- | ---- | ---- | -----------
|`ha-card-border-radius:`|`20px`|0.88.1|Rounded corners on cards. NOTE: may not work with custom cards.
|`ha-card-background:`|`'grey'`|0.88.1|Defines the background for cards.
|`ha-card-box-shadow:`|`1px 3px 4px black`|0.89|Shadows on cards. Same as `shadow-elevation-2dp_-_box-shadow:`

## Fonts
| Element | Example Value | HA Version | Description

This file has been truncated. show original

capstan1 · July 26, 2019, 7:39am

Hi,

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] http://192.168.1.2:8123/local/card-tools.js?:53:20 Uncaught TypeError: Cannot read property 'querySelector' of null

finity · July 26, 2019, 5:22pm

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] http://192.168.1.11:8123/community_plugin/lovelace-theme-maker/theme-maker.js:122:43 Uncaught TypeError: Cannot read property 'trim' of undefined
2019-07-26 13:16:51 ERROR (MainThread) [frontend.js.latest.201907210] http://192.168.1.11:8123/community_plugin/lovelace-theme-maker/theme-maker.js:122:43 Uncaught TypeError: Cannot read property 'trim' of undefined

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