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:

Overview

Logbook

Hass.io

Configuration

Profile

Installation

See installation notes
  1. Add the following code to your configuration.yaml file (reboot required).
frontend:
  ... # 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:

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
  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.

Manual

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