search

JOHLC / transparentblue

A transparent blue theme for Home Assistant
MIT License
30 stars 8 forks source link
hacs home-assistant home-automation homeassistant homeassistant-addons theme transparent-blue-theme transparentblue yaml

readme

Transparent Blue Theme for Home Assistant

HACS DefaultGitHub Release DateGitHub release (latest by date)

Overview

Transparent Blue is a theme designed for Home Assistant, offering a sleek and transparent blue aesthetic. It's my first custom theme for Home Assistant and my first ever GitHub/HACS repository.

Please report any issues through the issues section and provide feedback or ask questions on the Home Assistant Community post.

Screenshots

Main

Screenshot 1

More info

Screenshot 1

Sidebar

v2023.12.1-2.png

Menu

Screenshot 3 Here is the [Included background image](https://github.com/JOHLC/transparentblue/blob/main/images/background.jpg)
## HACS installation - recommended
Transparent Blue is now a default repo in HACS! 1. Open HACS 2. Select "Frontend" 3. Click add (+) 4. Search for Transparent Blue and click it 5. Click Download You should now be able to select this theme in Home Assistant ### Manual Installation - not recommended
1. Download the transparentblue.yaml file from the latest release 2. Upload the downloaded file to your "themes" directory 3. Add the resource reference to your lovelace config You should now be able to select this theme in Home Assistant ## Changing the background image
This theme uses a base64 encoded image. I use [this](https://www.base64-image.de/) website to encode my images.
To change the background of this theme, change the following in the .yaml file: ```` lovelace-background: 'center / cover no-repeat fixed url()' ```` In between the brackets, in the url() section, add your own base64 string: ```` # Example lovelace-background: 'center / cover no-repeat fixed url('data:image/png;base64,YOURLONGSTRING)' ```` Alternatively, you can use a local image stored in your config/www directory or a publicly accessible image url like so ```` lovelace-background: 'center / cover no-repeat fixed url("/local/background.png")' # OR # lovelace-background: 'center / cover no-repeat fixed url("http://www.reportingday.com/wp-content/uploads/2018/06/Cat-Sleeping-Pics.jpg")' ```` ## Beta versions Beta versions may be released for personal testing. If you're using HACS, you can enable/disable beta versions by changing the "Show beta versions" setting.
hacs beta
## Other cool themes - https://github.com/3ative/3ative-blue-theme - https://github.com/naofireblade/clear-theme-dark