UX Goodie Theme

Hello there!

I would like to share my brand-new theme – UX Goodie Theme :slight_smile: It’s inspired by iOS Dark Mode and by @basnijholt’s theme.
I have added some rarely used properties and modified lot’s of others. I hope you will like it!

It’s available on HACS and GitHub so don’t hesitate to star it! :wink:







See installation notes
  1. Add the following code to your configuration.yaml file (reboot required).
  ... # your configuration.
  themes: !include_dir_merge_named themes
  ... # your configuration.
  1. Put background.jpg into your /config/www/ directory. For example file see backgrounds/ directory of this repository.

  2. (Optional) Add the following to your lovelace-ui.yaml or use the RAW editor: (you also need to install custom-header) to display date and time in tab bar:

    options: '{{ time }}<br>{{ date }}'
  compact_mode: true

NOTE: options: from above example may not display properly in HACS. Please see GitHub repository.)


See HACS instructions
  1. Go to the Community Store.
  2. Search for UX Goodie Theme.
  3. Navigate to UX Goodie Theme theme.
  4. Press Install.
  5. Follow point 2 from Installation section above.
  6. Go to services and trigger the frontend.reload_themes service.
  7. (Optional) Follow point 3 from Installation section above.


See manual instructions
  1. Clone this repository in your existing (or create it) themes/ folder.
cd themes/
git clone https://github.com/home-assistant-community-themes/lovelace-ux-goodie-theme.git

Or using submodules:

cd themes/
git submodule add https://github.com/home-assistant-community-themes/lovelace-ux-goodie-theme.git
  1. Follow points 2 and 3 from Installation section above.
1 Like

Just installed it through HACS. Will give it a spin for a few days. Thanks for the effort and making this community again a bit more complete :smile:

1 Like

Is it possible to make the side bar semi-transparent like the header?

Unfortunately it’s not possible because there’s basically no background (image) below the sidebar. You can do it even 100% transparent, but then sidebar background would appear totally white.

1 Like

How can I remove the little shadow around the cards ? I used card-mod to make a card completely transparent but I am left with the shadow. :slight_smile:

Do you want to do that just for a single card or globally?

I see that there’s “ha-card-box-shadow” variable so you may want to add it to theme yaml configuration file and define whatever shadow you would like to have (or set it to no shadow).

Speaking about cards background, there’s “card-background-color” variable which should be responsible for cards background. Therefore you should be able set it (globally) to transparent inside ‘ux_goodie.yaml’ as well :slight_smile:

PS If you want to do that kind of customizations in ‘ux_goodie.yaml’, I would advice you to create separate file in ‘themes’ folder and store your customized theme there. That way you will not lose your changes once I update my theme in the future (e.g. to improve compatibility with new HA frontend version).

Sorry I forgot this. I finally did it using the card-mod. Yes I wanted it only for some cards and not globally. :slight_smile:

1 Like

Is anyone else getting white background in Yaml Code Editor ?
How do we fix that ?

roll back to 2022.2.9 :slight_smile: … or edit your Theme, as the removed some “outdated” papper-color, and there should be some docs, with some tips/ideas of what you can use instead

Is there a way we can update the theme (I believe this has nothing to do with this specific theme but every theme) without losing the old configuration ?

Every time I update it it returns to it’s original settings.

Yes , quite normal when using some of the awesome Themes people have made, so if you ADD, Change in the Theme, make sure to make a backup ( copy / paste ) … when an “update” for the Theme you use is available, Click the Git-hub repository, where you find the “theme.yaml” somewhere :slight_smile: … copy that as well, compare with the 1 you got, and click “update” just so you are on “right” version … then decide whether you want to replace the Theme.yaml, with your old , and “copy/paste” changes from “Updated”, or visa-versa

PS: hope it makes sense … sometimes i don’t know what im “typing” :slight_smile:

Yes that is what I am doing always. Just wanted to make sure I do not do that if there was an easier way. Thanks a lot. :wink:

:slight_smile: , i actually never checked this latest update in regards to, “do they ingest changes in present theme.yaml file or overwrite” ( and my memory is very bad ) :slight_smile: , should be possible to just “apply” changes, next time/update i will check better before making any “manual” job :slight_smile: ,
edit: or make your own . include-overwrite_in_theme.yalm, i have to checked this up …

Edit: PS: Actually there is a “variant” i have not looked deeper into, happy/sad-dark/light mode, describing fairly what i mean, but not tried if this can be “applied” to/using custom:Themes, then you got “The best of 2 worlds” :slight_smile: … Custom: Theme / happy / dark … or Default / Custom / Private

EDIT: i know that would be Best of 3 worlds :grinning_face_with_smiling_eyes: