From what I’ve seen, there is no option to change simple stuff like that!
It’s basically just a way of changing the theme colours.
Seems really daft that it doesn’t just allow you to add CSS properties to theme like a normal website! One of my biggest bugbears with Home Assistant.
Thanks. I really like it.
Do you know how to change the graph color from red?
I think the primary-color: ‘#03a9f4’ would look nice.
In Lovelace I do, not sure how to on the regular UI.
They should. Custom cards cause issues with transparency though.
Ah, ok.
Do you know if this something likely to be fixed?
I know Lovelace is experimental etc. I just wondered if you knew if this might be an issue anyone is looking at.
You would have to report an issue on github for the custom card you are using.
Amazing !!! Congrats
Thank you for this - I ended up pulling your primary-color and card background colours with transparency into a different theme because for some reason my ‘on’ states were the same color as my ‘off’ states with yours. Awesome job though 
Yeah I don’t have them changing on mine.
Hi, how did you retrieve the latest tasmota version?
I know this post is pretty old but… I would love to try that theme if you want to share it, looks great!
Not all my own work, this was a collaborative effort as is so often the case here but this is how I do it.
#============
#=== Sensors
#============
sensor:
# Latest Sonoff Tasmota firmware version
- platform: command_line
name: Tasmota Current Version
command: "curl -s https://github.com/arendst/Sonoff-Tasmota/releases/latest | cut -d'\"' -f2 | rev | cut -d'/' -f1 | rev"
scan_interval: 86400
# Earliest Sonoff Tasmota firmware version
- platform: template
sensors:
tasmota_earliest_installed_version:
entity_id: sensor.time
friendly_name: Tasmota Earliest Installed Version
value_template: >
{% set ns = namespace(lowest = states('sensor.tasmota_current_version')[1:]) %}
{% for item in states if item.entity_id.split(".")[1].endswith('firmware') and
item.entity_id.split(".")[1].startswith('sonoff') and
item.state != 'unknown' and
item.state < ns.lowest %}
{% set ns.lowest = item.state %}
{% endfor %}
v{{ ns.lowest }}
# Installed firmware version
- platform: mqtt
name: "Sonoff01_firmware"
state_topic: "stat/sonoff01/STATUS2"
value_template: "{{ value_json.StatusFWR.Version }}"
#================
#=== Automations
#================
automation:
- id: 'sonoff_firmware_installed'
alias: Sonoff Firmware Installed
trigger:
- platform: time
at: '00:00:15'
- platform: homeassistant
event: start
action:
- service: mqtt.publish
data:
topic: cmnd/sonoff01/status
payload: "2"
And just for completeness here is my Lovelace
- type: entities
title: Software & Firmware Versions
show_header_toggle: false
entities:
- entity: sensor.installed_version
name: Hassio Installed Version
icon: mdi:home-assistant
- entity: sensor.latest_available_version
name: Hassio Current Version
icon: mdi:home-assistant
- type: divider
- entity: sensor.tasmota_current_version
name: Tasmota Current Version
icon: mdi:alpha-s-box-outline
- entity: sensor.tasmota_earliest_installed_version
name: Tasmota Earliest Installed Version
icon: mdi:alpha-s-box-outline
And I also use the custom popup-card by @thomasloven to show the actual firmware on all my sonoffs. (Obviously I’m only showing the first one here - extend everything as necessary for all you devoices.)
- type: custom:popup-card
entity: sensor.tasmota_earliest_installed_version
title: Tasmota Firmware Versions
card:
type: entities
entities:
- entity: sensor.sonoff01_firmware
name: Sonoff 01
icon: mdi:alpha-s-box-outline
4 Likes
Thanks for your extended reply! Very useful!
Does someone have a black theme for oled phones. I‘d like to have the background totally black (led off) only the text white.
EDIT:
I changed these collors to “#000000”:
paper-listbox-background-color: “#000000”
paper-card-background-color: “#000000”
paper-dialog-background-color: “#000000”
table-row-background-color: “#000000”
table-row-alternative-background-color: “#000000”
and now got a black theme for my oled display.
1 Like
Hello,does anyone knows how to edit the text and the etat color in the mediaplayer card?
I would like to keep it orange but i can’t find how:
Light:
base-hue: '220' #Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red
base-sat: '5%' #Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation
# MyVar
huesat: 'var(--base-hue), var(--base-sat),'
# Primary Color
primary-color: 'hsl(var(--huesat) 36%)' #header colors and some text colors
# Backgrounds
primary-background-color: 'hsl(0, 0%, 98%)'
secondary-background-color: 'hsl(0, 0%, 95%)'
paper-card-background-color: 'var(--primary-background-color)'
# Text colors
primary-text-color: 'hsl(0, 0%, 50%)'
secondary-text-color: 'hsl(0, 0%, 60%)'
disabled-text-color: 'hsl(0, 0%, 70%)'
# Divider
divider-color: 'hsla(0, 0%, 0%, 0)'
# Paper card
paper-card-header-color: 'hsla(0, 0%, 0%, 0.5)'
paper-item-icon-color: 'hsl(0, 0%, 80%)'
paper-item-icon_-_color: 'var(--paper-item-icon-color)'
# Nav Menu
paper-listbox-color: 'hsl(0, 0%, 85%)'
paper-grey-200: 'hsl(0, 0%, 95%)'
# Switches
paper-toggle-button-checked-ink-color: 'hsl(192, 0%, 50%)'
paper-toggle-button-checked-button-color: 'hsl(192, 0%, 98%)'
paper-toggle-button-checked-bar-color: 'hsl(192, 0%, 50%)'
paper-toggle-button-unchecked-bar-color: 'hsl(192, 0%, 85%)'
# Shadows
# Sliders
paper-slider-knob-color: 'var(--primary-color)'
paper-slider-knob-start-color: 'var(--primary-color)'
paper-slider-pin-color: 'var(--primary-color)'
paper-slider-active-color: 'var(--primary-color)'
paper-slider-secondary-color: 'hsl(0, 0%, 90%)'
# Labels
label-badge-red: 'var(--primary-color)'
label-badge-background-color: 'var(--paper-card-background-color)'
What is weird is that i have another almost similar theme where the colors are fine:
Dark:
# Main Stuff #
primary-color: "#485056" # Primary (most of the UI)
# Backgrounds
primary-background-color: "#1c2022" # Primary background colour (dialogs, e.t.c)
secondary-background-color: "#1c2022" # Secondary background colour (main UI background)
paper-card-background-color: "#1c2022" # Card background colour
# Text colors
primary-text-color: "#FFFFFF" # Primary text colour
secondary-text-color: "#FFFFFF" # Secondary text colour
disabled-text-color: "#FFFFFF" # Disabled text colour
# Divider
divider-color: "rgba(255, 255, 255, 0.12)" # Divider colour
# Paper card
paper-card-header-color: "#FFFFFF" # Card header text colour
paper-item-icon_-_color: "#ffffff"
paper-item-icon-color: "#ffffff" # Icon colour
# Nav Menu #
paper-listbox-background-color: "#1c2022" # Listbox background colour
paper-listbox-color: "#FFFFFF" # Listbox text colour
paper-grey-200: "#1c2022" # Listbox selected item background colour
# Switches #
paper-toggle-button-unchecked-bar-color: "#505050"
paper-toggle-button-checked-ink-color: "#485056"
paper-toggle-button-checked-button-color: "#485056"
paper-toggle-button-checked-bar-color: "#485056"
# Shadows
# Sliders #
paper-slider-knob-color: "#485056"
paper-slider-knob-start-color: "#485056"
paper-slider-pin-color: "#485056"
paper-slider-active-color: "#485056"
paper-slider-secondary-color: "#485056"
# Labels
label-badge-background-color: "#ffffff"
label-badge-red: "#485056"
Any kind of help would be awsome.
Thanks
1 Like
Hey,
That’s based on the accent-color theme variable, but I can’t see it being set in your theme, so should default to the default orange accent color.
Did you actually post the complete theme? I just tried with the Light theme you posted and it doesn’t seem to change accent-color (still orange).
What you could try is adding: accent-color: '#f1c40f' at the end of your theme.
1 Like
Thanks kalkih.
Not sure if you use lovelace or not but when you select a tab, the link seems to be gone or dissappear
