I would like to share my brand-new theme – UX Goodie Theme 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!
Add the following code to your configuration.yaml file (reboot required).
frontend:
... # your configuration.
themes: !include_dir_merge_named themes
... # your configuration.
Put background.jpg into your /config/www/ directory. For example file see backgrounds/ directory of this repository.
(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:
custom_header:
button_text:
options: '{{ time }}<br>{{ date }}'
compact_mode: true
NOTE: options: from above example may not display properly in HACS. Please see GitHub repository.)
HACS
See HACS instructions
Go to the Community Store.
Search for UX Goodie Theme.
Navigate to UX Goodie Theme theme.
Press Install.
Follow point 2 from Installation section above.
Go to services and trigger the frontend.reload_themes service.
(Optional) Follow point 3 from Installation section above.
Manual
See manual instructions
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
Follow points 2 and 3 from Installation section above.
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.
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
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).
roll back to 2022.2.9 … 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 … 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”
, 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 ) , should be possible to just “apply” changes, next time/update i will check better before making any “manual” job ,
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” … Custom: Theme / happy / dark … or Default / Custom / Private
It’s inspired by iOS Dark Mode and by @basnijholt’s theme.
… 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
