UX Goodie Theme

The UX Goodie Theme for Home Assistant made by @fi-sch. Inspired by iOS Dark Mode and @basnijholt's theme.

Please see instructions below!

Screenshots (a little bit outdated)

Overview

Logbook

History

Developer Tools

Hass.io

Configuration

Profile

Installation

1. Add the following code to your configuration.yaml file (reboot required).

frontend:
  ... # your configuration.
  themes: !include_dir_merge_named themes
  ... # your configuration.

2. Put background.jpg into your /config/www/ directory. For example file see backgrounds/ directory of this repository. Alternatively, if you don't want to use any background just comment the 5th line of ux_goodie.yaml

lovelace-background: 'center / cover no-repeat url("/local/background.jpg") fixed'

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

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

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

2. Follow points 2 and 3 from Installation section above.

Known Issues

"Publish" button Dev Tools -> MQTT section appears totally white. This is somehow related to inconsistency within color properties of buttons across the application.