Latest release:
Releases · JOHLC/transparentblue (github.com)
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
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?
Depends on the app, but if you open the sidebar then click your profile button its here:
Thanks I found it. Its amazing 
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
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
I uninstalled custom-ui and no change…
browser-mod? Uninstalled and no change…
I found the culprit: card-mod
1 Like