Theme editor - first version. please test and give your feedback!

Hi all,

Over the last days i’ve been creating a simple (but working) theme creator. i’ve put the code in codepen, feel free to try! if you want to save the theme, just create a folder in your themes-folder with the same name as the filename of the theme.yaml

themes

hellothere
→ hellothere.yaml

codepen link to the theme creator

You can use it inside the code pen to test and create.

At this moment I have:

  1. palette importer. (optional) you can paste any url that contains #colors. you can see them and copy the hex code (or make changes to it) you can also just paste a bunch of #hex colors.

  1. Edit colors and values. you can import existing color themes to adapt. there are a “default” DARK or LIGHT Theme to play with, which you can revert to. you can manually paste the hex codes (or change in a picker) . If the previous hex code you want to replace is reused in other fields, you get a button you can click to update the rest to the new hex color as well when you paste the new color.

2b: Color playground. 2 spots where you can experiment and choose colors. an option to generate shades (0% to 100% black).

A color playground and shades generator.

3: a live preview of cards and toggles and header:

4: card style setting to disable/enable/change some settings. Border width 0 is no border.

5: export theme yaml with a random name generator.

Still work in progress, but i’m having a lot of fun doing this!

feel free to play around and if you want, give feedback.

edit: link to fullscreen codepen

7 Likes

This is a great start. IMO something like this should be available as a core feature.

FYI:

paper-slider-knob-color slider variables have changed in 2025.10.0

1 Like

This is a great idea!
And ill agree with Tom J aswell!
Sure gonna try this out!

1 Like

This looks good! Some suggestions though

  1. I would love to have more examples. Perhapse add some custom cards like mushroom / bubble / tile to see the changes better.
  2. Disable the html / css / js view
  3. Add some custom options into it ( for ex disabling header )
1 Like

Interested, watching and 3rding the idea that this should be part of core.

1 Like
  1. good idea, but would prob mean i’d have to add a seperate mushroom card or does mushroom folow standard theming names?

  2. it’s just a workspace, where I play around in

  3. like an advanced setting where there are more posiblities? other examples like “disabling header”? i just want to make sure we’re still theming, and not css hacking.

1 Like

I don’t find the slider variant info, do you happen to have more on that ?

Awesome idea. :tada:

And indeed, this would be an awesome core feature, showing a real dashboard as preview.

But as long as this doesn’t exist, this is a real color thing.
Thx a lot for creating and sharing this. :slightly_smiling_face::+1:

1 Like

At the moment it is:

ha-control-color

That applies colour to the bar and knob.

There is a PR to split into two again like we had before:

ha-slider-thumb-color
ha-slider-indicator-color

It has been merged so it should be in the next dot release (2025.10.2).

fixed. thank you.

Can confirm this now works in 2025.10.2