Theme-maker - a tool for designing themes

Do you have a line that starts with a :?

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

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.

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

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

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

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 :slight_smile:

It should still work.

1 Like

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

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

Ah, rightā€¦
ā€¦forgot about that thingā€¦

Thereā€™s a new version on github that fixes this.

1 Like

Iā€™m shocked I got the right log :joy:

1 Like

Its working now, thanks!

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!

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?

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

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

hello. this tool keep maintened?

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

No, I hardly ever used the card.