Theme-maker - a tool for designing themes

thomasloven · July 26, 2019, 5:42pm

Do you have a line that starts with a :?

thomasloven · July 26, 2019, 5:43pm

Make sure you have the latest version of card-tools and please provide the new error message if it still happens.

finity · July 26, 2019, 5:59pm

No, but I did have a bunch of comments that were included in the theme code.

I just tried it again with most (not all) of the comments pared out and it isn’t giving the error anymore. So for some reason it doesn’t seem to like having any content before the first theme element?

So this won’t work:

## https://www.colorhexa.com/

color_chart:
  # Main Stuff #
  primary-color: "#848482" # Grey
  light-primary-color: "#ff1493" # Pink
  primary-background-color: "#89cff0" # Baby Blue
  secondary-background-color: "#bf94e4" # Lavendar
  #ha-card-background:
  paper-card-background-color: "#915b25" # Brown
  paper-item-icon-color: "#ff4f00" # Orange

but this is OK:

color_chart:
  # Main Stuff #
  primary-color: "#848482" # Grey
  light-primary-color: "#ff1493" # Pink
  primary-background-color: "#89cff0" # Baby Blue
  secondary-background-color: "#bf94e4" # Lavendar
  #ha-card-background:
  paper-card-background-color: "#915b25" # Brown
  paper-item-icon-color: "#ff4f00" # Orange

Then on the second one it’s able to strip out all of the comments and leave only the code.

capstan1 · July 29, 2019, 8:25am

Installed version 0.4 and the error persists:

2019-07-29 10:24:08 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

thomasloven · July 29, 2019, 10:54am

Clear your cache in all browsers: https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins#clearing-cache

capstan1 · July 30, 2019, 7:42am

That did the trick, sorry for not seeing your FAQ!

Nuffsaid86 · November 24, 2019, 4:57pm

Should this still be working with most recent hassio version?
I’ve got installed lateatcard-tools and have read the faq bit can’t get it to work.

Only need to know if it should still be working. I’ll have to mess around to figure out so I can learn

thomasloven · November 24, 2019, 8:53pm

It should still work.

Nuffsaid86 · November 25, 2019, 11:40pm

I did get it to work half eventually
Import/export not working but at least i can try out some live theme changes

Kayhold · November 26, 2019, 7:25am

Import suddently stopped working for me after the latest patch update.
I’ve updated my plugin, cleared the cache, tried different themes.

I think this is the relevant log from chrome’s console.

dumper.js:756 Uncaught (in promise) i {name: "YAMLException", reason: "unacceptable kind of an object to dump [object HTMLElement]", mark: undefined, message: "unacceptable kind of an object to dump [object HTMLElement]", stack: "YAMLException: unacceptable kind of an object to d…cal:8123/frontend_latest/app.2d1ab8ac.js:2:12900)"}mark: undefinedmessage: "unacceptable kind of an object to dump [object HTMLElement]"name: "YAMLException"reason: "unacceptable kind of an object to dump [object HTMLElement]"stack: "YAMLException: unacceptable kind of an object to dump [object HTMLElement]↵    at Z (https://hassio.local:8123/frontend_latest/chunk.076aaca62db3e8acde76.js:2417:193326)↵    at ee (https://hassio.local:8123/frontend_latest/chunk.076aaca62db3e8acde76.js:2417:193917)↵    at e.exports.safeDump (https://hassio.local:8123/frontend_latest/chunk.076aaca62db3e8acde76.js:2417:194005)↵    at HTMLElement.value (https://hassio.local:8123/frontend_latest/chunk.076aaca62db3e8acde76.js:2503:32)↵    at HTMLElement.update (https://hassio.local:8123/frontend_latest/app.2d1ab8ac.js:2:17467)↵    at HTMLElement.performUpdate (https://hassio.local:8123/frontend_latest/app.2d1ab8ac.js:2:13270)↵    at HTMLElement._enqueueUpdate (https://hassio.local:8123/frontend_latest/app.2d1ab8ac.js:2:12900)"__proto__: Errorconstructor: ƒ i(e,t)toString: ƒ (e)__proto__: Object
_enqueueUpdate @ updating-element.js:469
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
initialize @ lit-element.js:95
O @ updating-element.js:98
V @ lit-element.js:46
F @ hui-error-card.ts:29
(anonymous) @ VM758:1
u @ card-mod.js:1
p @ card-mod.js:1
(anonymous) @ card-mod.js:1
create @ card-mod.js:1
setConfig @ card-mod.js:1
set config @ card-mod.js:1
S @ card-tools.js:1
yamlMode @ theme-maker.js:153
handleEvent @ parts.js:434
__boundHandleEvent @ parts.js:400
dumper.js:756 Uncaught (in promise) i {name: "YAMLException", reason: "unacceptable kind of an object to dump [object HTMLElement]", mark: undefined, message: "unacceptable kind of an object to dump [object HTMLElement]", stack: "YAMLException: unacceptable kind of an object to d…cal:8123/frontend_latest/app.2d1ab8ac.js:2:12900)"}mark: undefinedmessage: "unacceptable kind of an object to dump [object HTMLElement]"name: "YAMLException"reason: "unacceptable kind of an object to dump [object HTMLElement]"stack: "YAMLException: unacceptable kind of an object to dump [object HTMLElement]↵    at Z (https://hassio.local:8123/frontend_latest/chunk.076aaca62db3e8acde76.js:2417:193326)↵    at ee (https://hassio.local:8123/frontend_latest/chunk.076aaca62db3e8acde76.js:2417:193917)↵    at e.exports.safeDump (https://hassio.local:8123/frontend_latest/chunk.076aaca62db3e8acde76.js:2417:194005)↵    at HTMLElement.value (https://hassio.local:8123/frontend_latest/chunk.076aaca62db3e8acde76.js:2503:32)↵    at HTMLElement.update (https://hassio.local:8123/frontend_latest/app.2d1ab8ac.js:2:17467)↵    at HTMLElement.performUpdate (https://hassio.local:8123/frontend_latest/app.2d1ab8ac.js:2:13270)↵    at HTMLElement._enqueueUpdate (https://hassio.local:8123/frontend_latest/app.2d1ab8ac.js:2:12900)"__proto__: Error
_enqueueUpdate @ updating-element.js:469
async function (async)
_enqueueUpdate @ updating-element.js:446
_requestUpdate @ updating-element.js:413
initialize @ updating-element.js:268
initialize @ lit-element.js:95
O @ updating-element.js:98
V @ lit-element.js:46

thomasloven · November 26, 2019, 12:02pm

Ah, right…
…forgot about that thing…

There’s a new version on github that fixes this.

Kayhold · November 26, 2019, 12:03pm

I’m shocked I got the right log

Kayhold · November 26, 2019, 12:05pm

Its working now, thanks!

Nuffsaid86 · November 26, 2019, 5:44pm

Thanks! This also seems to have been my problem.
Fully working theme-maker now.
Great addition to messing with Home Assistanyt for me, just like your other works!

brucehvn · January 7, 2020, 2:51am

I’m having trouble getting this to work. I’m sure I probably just overlooked something, but when I try and create a manual card in lovelace and put:
type: custom: theme-maker
I’m getting the error:

Custom element doesn't exist: theme-maker.
type: 'custom:theme-maker'

I installed card-tools from HACS. I cloned the theme-maker github and placed the theme-maker.js into /config/www/js/theme-maker.js

This is my resources information from the raw config editor:

resources:
  - type: module
    url: /community_plugin/lovelace-card-tools/card-tools.js
  - type: js
    url: /local/js/theme-maker.js?v=1

I see nothing in the logs related to this and I’ve restarted hassio, cleared cache, refreshed, etc.

Any ideas what I’m doing wrong?

thomasloven · January 7, 2020, 8:41am

The see this guide link in the readme contains some troubleshooting tips that may help you get more information.

BVavra · January 7, 2021, 7:05am

I cannot import a theme. I am not able to click anywhere in the popup. Everything else is working wonderfully. Any advice?

hellresistor · March 6, 2021, 8:32pm

hello. this tool keep maintened?

carloda · May 1, 2021, 3:28pm

Unfortunately I have the same problem, have you managed to solve it?

BVavra · May 5, 2021, 4:01pm

No, I hardly ever used the card.