Transparent Blue custom theme

Transparent Blue

hacs_badge
GitHub Release Date GitHub release (latest by date)
GitHub All Releases .github/workflows/validate.yaml

A transparent blue theme for Home Assistant

This is a theme I created for Home Assistant called Transparent Blue. This is/was my first ever custom theme for Home Assistant and my first ever GitHub/HACS repository.

It can be installed via HACS or manually with help from the instructions below.

Screenshots

Main

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 Install
    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 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: url('data:image/png;base64,YOURLONGSTRING)

You can also add 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")' 
4 Likes

Latest release:
Releases · JOHLC/transparentblue (github.com)




2 Likes

Update!
Made it into HACS default repo!

I love this theme! Anyway to change the background image? I’d like the image but want to edit it. Thanks

Hello!

Thanks for the feedback and yes, you can totally change the background image.
You will need to edit the yaml at:

lovelace-background: 'center / cover no-repeat fixed url()'

You can find the original image here

I also have the original non-blured on somewhere if you want it.

Note that in my theme, I am using base64 encoding for the image and not a reference to the image itself, you can do the same with help from this page

1 Like

Hi, thanks for this amazing theme. I have a question, how you made the phone status cards?

Hello and thanks for the feedback!

For these cards I am using the Button Card by @RomRider

The yaml for the cards was tweaked slightly from a community post, cant remember where from.

I have two images in my www folder for the images
pixel samsung
Here is an example:

type: horizontal-stack
cards:
  - type: 'custom:button-card'
    entity: sensor.joels_phone_battery_level
    entity_picture: /local/pixel.png
    show_entity_picture: true
    aspect_ratio: 1/.85
    name: Joel's Phone
    styles:
      card:
        - padding: 7%
        - color: white
        - text-shadow: 0px 0px 5px black
        - text-transform: capitalize
      grid:
        - grid-template-areas: '"i trbat" "n n" "bat bat" "wifi wifi" "blu blu"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr min-content min-content min-content min-content
      name:
        - font-weight: bold
        - font-size: .9em
        - color: white
        - align-self: left
        - justify-self: start
        - padding-bottom: 1px
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
      icon:
        - width: 100%
      custom_fields:
        bat:
          - align-self: middle
          - padding-bottom: 2px
          - justify-self: start
          - font-size: .7em
        trbat:
          - align-self: start
          - justify-self: end
          - font-size: .7em
        blu:
          - padding-bottom: 2px
          - align-self: middle
          - justify-self: start
          - font-size: .7em
        wifi:
          - padding-bottom: 2px
          - align-self: middle
          - justify-self: start
          - font-size: .7em
    custom_fields:
      bat: |
        [[[
          return `<ha-icon
            icon="mdi:battery"
            style="width: 20px; height: 20px; color: white;">
            </ha-icon><span>Battery: <span style="color: var(--text-color-sensor);">${states['sensor.joels_phone_battery_state'].state}</span></span>`
        ]]]
      trbat: |
        [[[
          return `<ha-icon
            icon="mdi:battery-high"
            style="width: 22px; height: 22px;">
            </ha-icon><span>${entity.state}%</span>`
        ]]]
      blu: |
        [[[
          return `<ha-icon
            icon="mdi:do-not-disturb"
            style="width: 20px; height: 20px; color: white;">
            </ha-icon><span>Do not distrub: <span style="color: var(--text-color-sensor);">${states['sensor.joels_phone_do_not_disturb_sensor'].state}</span></span>`
        ]]]
      wifi: |
        [[[
          return `<ha-icon
            icon="mdi:wifi"
            style="width: 20px; height: 20px; color: white;">
            </ha-icon><span>WiFi: <span style="color: var(--text-color-sensor);">${states['sensor.joels_phone_wifi_connection'].state}</span></span>`
        ]]]
  - type: 'custom:button-card'
    entity: sensor.taylors_phone_battery_level
    entity_picture: /local/samsung.png
    show_entity_picture: true
    aspect_ratio: 1/.85
    name: Taylor's Phone
    styles:
      card:
        - padding: 7%
        - color: white
        - text-shadow: 0px 0px 5px black
        - text-transform: capitalize
      grid:
        - grid-template-areas: '"i trbat" "n n" "bat bat" "wifi wifi" "blu blu"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr min-content min-content min-content min-content
      name:
        - font-weight: bold
        - font-size: .9em
        - color: white
        - align-self: left
        - justify-self: start
        - padding-bottom: 1px
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
      icon:
        - width: 100%
      custom_fields:
        bat:
          - align-self: middle
          - padding-bottom: 2px
          - justify-self: start
          - font-size: .7em
        trbat:
          - align-self: start
          - justify-self: end
          - font-size: .7em
        blu:
          - padding-bottom: 2px
          - align-self: middle
          - justify-self: start
          - font-size: .7em
        wifi:
          - padding-bottom: 2px
          - align-self: middle
          - justify-self: start
          - font-size: .7em
    custom_fields:
      bat: |
        [[[
          return `<ha-icon
            icon="mdi:battery"
            style="width: 20px; height: 20px; color: white;">
            </ha-icon><span>  Battery: <span style="color: var(--text-color-sensor);">${states['sensor.taylors_phone_battery_state'].state}</span></span>`
        ]]]
      trbat: |
        [[[
          return `<ha-icon
            icon="mdi:battery-high"
            style="width: 22px; height: 22px; color: white;">
            </ha-icon><span>${entity.state}%</span>`
        ]]]
      blu: |
        [[[
          return `<ha-icon
            icon="mdi:do-not-disturb"
            style="width: 20px; height: 20px; color: white;">
            </ha-icon><span>  Do not distrub: <span style="color: var(--text-color-sensor);">${states['sensor.sm_a505u1_do_not_disturb_sensor'].state}</span></span>`
        ]]]
      wifi: |
        [[[
          return `<ha-icon
            icon="mdi:wifi"
            style="width: 20px; height: 20px; color: white;">
            </ha-icon><span>  WiFi: <span style="color: var(--text-color-sensor);">${states['sensor.taylors_phone_wifi_connection'].state}</span></span>`
        ]]]

Really incredible, i have searched for months a theme like this. A big thank you from my colleagues too, since I installed hass in the office and applied your theme everyone has fallen in love. Now everyone wants it. I was also able to customize the background with the base64 converter.

1 Like

Thanks for the feedback! Glad people like it!

Hi Joel!!

I installed your very beautiful theme a lot of time ago and always worked fine, but about since the last month it stopped to work properly and the changed state icons (configured on) stands in white

When I change from dashboard to dashboard, just for half second, the icons with changed state, switch correctly to yellow, then turn back to white

I’m on windows 10, chrome Version 89.0.4389.82 (tried edge too), but on android app on my smartphone, it continues to work really fine

I tried also others themes (not so nice like yours) and everything works fine

What I’m doing wrong?? Any idea??
Thank in advance for your kind help
Regards

Hello,

Few things,
What version of the theme are you running and how do you have it installed?
I just released an update today, can you see if you have the same issue with that version?
If you’re still having issues can you open an issue on the repo with details and screenshots?

JOHLC/transparentblue: A transparent blue theme for Home Assistant (github.com)

Thanks for all the kind words

Hi Joel,

Tried the latest version and also previouses, always from HACS: same issue
Changed browser settings, delete cache, restart HA, also the host, to be sure starting from initialization: still the same
Removed one extra toolbar addon and all the other themes repository: still the same

Screenshots may not help, just imagine icons still white instead of yellow when active, never blue
(on the android app stay blue for inactive, yellow for active, like it has to be!)

I really don’t know what happens…

regards

I have installed this wonderful theme but where can I select it to apply it on my HA? Thanks

Interesting. I do not experience the same issue. What other custom frontend stuff you got going on? What version of Home Assistant?

image

Depends on the app, but if you open the sidebar then click your profile button its here:
image

Hi Joel,

here some screenshots…

image

Thanks I found it. Its amazing :clap:

1 Like

What does your card config and yaml look like?

I’ve been having the same issue since a couple of HA releases ago.
My profile theme is backend selected which changes between Google Light Theme at sunrise and Google Dark Theme at sunset and I have transparentblue applied to some views. I’ve tried using it as profile theme, view theme and card theme but experience the momentary flash of blue for active icons, then white. HA is fully up to date and I’m using https://github.com/Mariusthvdb/custom-ui
image

System Health

version: core-2021.3.3
installation_type: Home Assistant OS
dev: false
hassio: true
docker: true
virtualenv: false
python_version: 3.8.7
os_name: Linux
os_version: 5.9.16
arch: aarch64
timezone: America/Vancouver

GitHub API: ok
Github API Calls Remaining: 4501
Installed Version: 1.11.3
Stage: running
Available Repositories: 826
Installed Repositories: 82

can_reach_server: ok
remaining_requests: 41

logged_in: true
subscription_expiration: April 3, 2021, 5:00 PM
relayer_connected: true
remote_enabled: false
remote_connected: false
alexa_enabled: true
google_enabled: true
can_reach_cert_server: ok
can_reach_cloud_auth: ok
can_reach_cloud: ok

host_os: Home Assistant OS 5.12
update_channel: stable
supervisor_version: supervisor-2021.03.4
docker_version: 19.03.13
disk_total: 113.9 GB
disk_used: 15.1 GB
healthy: true
supported: true
board: odroid-n2
supervisor_api: ok
version_api: ok
installed_addons: motionEye (0.11.1), File editor (5.2.0), UniFi Controller (0.20.3), Mosquitto broker (5.1.1), TasmoAdmin (0.14.0), Samba share (9.3.1), Home Assistant Google Drive Backup (0.103.1), Log Viewer (0.9.1), Node-RED (8.1.3), Duck DNS (1.12.5), Glances (0.11.1), InfluxDB (4.0.3), SSH & Web Terminal (8.0.3), NGINX Home Assistant SSL proxy (3.0.1), AdGuard Home (3.0.0), Portainer (1.4.0), Z-Wave JS to MQTT (0.6.2), ESPHome (1.16.2), MariaDB (2.2.2), ADB - Android Debug Bridge (0.7.0), Visual Studio Code (3.1.1), WireGuard (0.5.0)

dashboards: 2
resources: 45
views: 26
mode: storage