Thanks sparkydave. Works like a charm.
Your assistance is much appreciated.
no worries.
I just realised that I have a theme with some descriptions in it which should help you figure out what parameters change what parts of the GUI
midnight_silvergit:
# Main colors
ha-card-border-radius: '20px'
ha-card-box-shadow: '-25px 65px 25px 0px rgba(50,50,50,0)'
primary-color: '#03a9f4' # Header
accent-color: '#03a9f4' # Accent color
dark-primary-color: 'var(--accent-color)' # Hyperlinks
light-primary-color: 'var(--accent-color)' # Horizontal line in about
# Text colors
primary-text-color: '#FFFFFF' # Primary text colour, here is referencing dark-primary-color
text-primary-color: '#FFFFFF' #'#03a9f4' # Primary text colour
secondary-text-color: '#8c8d90' # For secondary titles in more info boxes etc.
disabled-text-color: '#7F848E' # Disabled text colour
label-badge-border-color: 'green' # Label badge border, just a reference value
# Background colors
primary-background-color: '#282828' # Settings background
secondary-background-color: '#5e5e5e' # Main card UI background
divider-color: 'rgba(0, 0, 0, .12)' # Divider
# Table rows
table-row-background-color: '#353840' # Table row
table-row-alternative-background-color: '#3E424B' # Table row alternative
# Nav Menu
paper-listbox-color: 'var(--primary-color)' # Navigation menu selection hoover
paper-listbox-background-color: '#282828' # Navigation menu background
paper-grey-50: 'var(--primary-text-color)'
paper-grey-200: '#414A59' # Navigation menu selection
sidebar-icon-color: 'var(--primary-color)'
# Paper card
paper-card-header-color: var(--accent-color)' # Card header text colour
paper-card-background-color: "rgba(40, 40, 40, 0.6)" # Card background colour
paper-dialog-background-color: var(--primary-background-color) # Card dialog background colour
paper-item-icon-color: 'var(--accent-color)' # Icon color
paper-item-icon-active-color: 'var(--accent-color)' # Icon color active
paper-item-icon_-_color: 'green'
paper-item-selected_-_background-color: '#282c34' # Popup item select
paper-tabs-selection-bar-color: 'green'
# Labels
label-badge-red: 'var(--accent-color)' # References the brand colour label badge border
label-badge-text-color: 'var(--primary-text-color)' # Now same as label badge border but that's a matter of taste
label-badge-background-color: '#21252b' # Same, but can also be set to transparent here
# Switches
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
restriction-lock-margin-left: 95%
restriction-lock-row-margin-left: 95%
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--accent-color)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
# Google colors
google-red-500: '#E45E65'
google-green-500: '#39E949'
Hi, I have a issue with a theme I found and I like-
Tables are all white (text, background, everything; I was able to fix the background adding
data-table-background-color: var(--primary-background-color)
to the yaml.
I still miss the âshadowâ effect; screenshot from default theme in HA:
Which is the key for this color ?
Thank you,
Simone
Dear,
thanks for providing transparent theme.
with the latest updates i am getting white background on the main left panel.
Please provide,
thanks in adv.
Mine is the same - guess it is related to the front end update here
Only way around it is to update your themes to colour this panel or use a theme from the HACS store which has already been updated to colour this.
Hi,
I found a solution to the problem in the following post by @ Tom_Goetz THX! 
trantsprent_theme:
# Main colors
# https://www.color-hex.com/color/5294e2
primary-color: '#5294E2' # Header
accent-color: '#E45E65' # Accent color
dark-primary-color: 'var(--accent-color)' # Hyperlinks
light-primary-color: 'var(--accent-color)' # Horizontal line in about
ha-card-border-radius: '6px'
ha-card-background: 'rgba(150, 150, 150, 0.1)'
# Text colors
primary-text-color: '#FFFFFF' # Primary text colour, here is referencing dark-primary-color
text-primary-color: 'var(--primary-text-color)' # Primary text colour
# secondary-text-color: '#5294E2' # For secondary titles in more info boxes etc.
secondary-text-color: '#74a9e7' # For secondary titles in more info boxes etc.
disabled-text-color: '#7F848E' # Disabled text colour
label-badge-border-color: 'green' # Label badge border, just a reference value
# Background colors
# primary-background-color: '#383C45' # Settings background
primary-background-color: '#4b4f57' # Settings background
secondary-background-color: '#383C45' # Main card UI background
divider-color: 'rgba(0, 0, 0, .12)' # Divider
# Table rows
table-row-background-color: '#353840' # Table row
table-row-alternative-background-color: '#3E424B' # Table row alternative
# Nav Menu
paper-listbox-color: 'var(--primary-color)' # Navigation menu selection hoover
paper-listbox-background-color: '#2E333A' # Navigation menu background
paper-grey-50: 'var(--primary-text-color)'
paper-grey-200: '#414A59' # Navigation menu selection
sidebar-icon-color: 'var(--primary-color)'
# Paper card
paper-card-header-color: 'var(--accent-color)' # Card header text colour
paper-card-background-color: 'rgba(150, 150, 150, 0.1)' # Card background colour
paper-dialog-background-color: '#434954' # Card dialog background colour
paper-item-icon-color: 'var(--primary-text-color)' # Icon color
paper-item-icon-active-color: '#F9C536' # Icon color active
paper-item-icon_-_color: 'green'
paper-item-selected_-_background-color: '#434954' # Popup item select
paper-tabs-selection-bar-color: 'green'
card-background-color: "var(--paper-card-background-color)"
# Labels
label-badge-red: 'var(--accent-color)' # References the brand colour label badge border
label-badge-text-color: 'var(--primary-text-color)' # Now same as label badge border but that's a matter of taste
label-badge-background-color: '#2E333A' # Same, but can also be set to transparent here
label-badge-background: 'rgba(255, 255, 255, 0.1)'
# Switches
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--accent-color)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
# Google colors
google-red-500: '#E45E65'
google-green-500: '#39E949'
# Sidebar
sidebar-background-color: "var(--paper-listbox-background-color)"
sidebar-icon-color: 'var(--primary-text-color)'
sidebar-selected-icon-color: "var(--primary-color)"
sidebar-selected-text-color: "var(--primary-text-color)"
sidebar-text-color: "var(--primary-text-color)"
slider-bar-color: "var(--disabled-text-color)"
slider-color: "var(--primary-color)"
slider-secondary-color: "var(--light-primary-color)"
# compact-custom-header https://github.com/maykar/compact-custom-header/wiki/Styling-Config
# cch-background: 'rgba(150, 150, 150, 0.2)'
3 Likes
by adjusting
sidebar-background-color: "var(--paper-listbox-background-color)"
to
sidebar-background-color: "var(--primary-background-color)"
i got bact the theme and its workignas expected
thanks
1 Like
After lots of tweaking i think iâm largely settled on my look (for now) so thought i would share - this has been begged, borrowed and stolen from so many various sources - iâm really going for a mobile first approach for the primary interface and love the multiple dashboards as i can bury the more technie stuff away.
1 Like
please allow me a more generic question, rather then posting a theme:
Iâve grown fond of this very simple card-header mod (color and front-weight), and would like to add it to my themes ( instead of having to add it to all my individual cards). Iâve tried a few options, but canât find the right way to do so.
could you please help me find out how to?
- type: entities
title: System settings
show_header_toggle: false
style: |
.card-header {color: var(--primary-color);
font-weight: bold;}
of course I only need the style bit, but posted a bit more to have you understand why I am doing.
Thanks for having a look and assistance if possible.
nice. Can you share the actual theme?
Iâm interested in those vertical lines on the headings.
Iâve tried icons, emojis and css border-left but none of them give a result like yoursâŠ
Great work! This looks great!
I would love to see the lovelace on this so I could borrow from it. This is the exact type of look I am going for but donât know where to start.
Will try and share with a bit more explanation, as mentioned iâve pulled for loads from others the ideaâs and code to do this - this has resulted in the look coming from the theme + compact header + custom button card, not saying my code is the cleanest (or that i even know exactly why certain CSS works the way it does) but hopefully it will help.
@Tyfoon @klogg @FaceBush - hope this helps, let me know if i can document any more parts of it.
Here is my raw theme YAML file:
# Theme Name
Colourful:
background-image: linear-gradient(230deg, rgb(29, 3, 68), rgb(30, 71, 91) 50%, rgb(144, 57, 73))
header-image: hsla(0,0%,100%,.1)
secondary-background: var(--background-image)
# Colour Palette
p-col: "#FF6188"
p-light-col: "#ffca47"
p-dark-col: "#c66a00"
b-col: "#606060"
b-light-col: "#8d8d8d"
b-dark-col: "#363636"
text-on-p: "#000000"
text-on-b: "#ffffff"
colour-pink: "#FF6188"
colour-black: "#36454f"
colour-white: "#fdfff5"
colour-dark-blue: "#36454f"
colour-lighter-grey: "#727072"
colour-yellow: "#fdbb2d"
colour-blue: "#0984FF"
colour-aqua: "#488EA3"
colour-purple: "#2A56A7"
colour-red: "#4f3645"
colour-row1: "#7691a2"
colour-row2: "#95a9b7"
button-active: "#fdfff5"
button-active-text: "#36454f"
# red for finding element
# var(--colour-finder1)
colour-finder1: "#ff0000"
# green for finding element
# var(--colour-finder2)
colour-finder2: "#00ff00"
# cyan for finding element
# var(--colour-finder3)
colour-finder3: "#00ffff"
primary-color: var(--colour-yellow) #text on header when it's submenu or selector, color of full dimmer on light - MAYBE REVERSE TO BRIGHT WITH DARK TEXT
light-primary-color: var(--colour-red) # color of cirle around username and icons
primary-background-color: var(--colour-dark-blue) #checker board on main page and header on subpage
secondary-background-color: var(--colour-dark-blue) # alternating lines on state page background of username menu
divider-color: var(--primary-background-color) # thin dividing lines on page including dashboard
accent-color: var(--colour-pink) # little edit buttons the ones that look like penicls
# Text
primary-text-color: var(--colour-white) #HA Name, main titles, letter in username
secondary-text-color: var(--colour-yellow) # secondary text on cards on on pickers and kebabs, through menus
text-primary-color: var(--colour-white) # underline on subment in addons
disabled-text-color: var(--colour-lighter-grey) # remaining dimmer on a light after current point, donw arrow on menu
# Sidebar Menu
sidebar-icon-color: var(--colour-white) # also include back arrows
sidebar-text-color: var(--colour-white)
sidebar-selected-background-color: var(--colour-finder1)
sidebar-selected-icon-color: var(--colour-white)
sidebar-selected-text-color: var(--colour-white)
# States and Badges
state-icon-color: var(--colour-white)
state-icon-active-color: var(--colour-yellow) # or make light icons yellow when active: rgba(255, 214, 10, 1)
state-icon-unavailable-color: var(--colour-finder1)
# Sliders
paper-slider-knob-color: "#FFF"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode
paper-slider-secondary-color: var(--paper-slider-knob-color)
paper-slider-container-color: rgba(255, 255, 255, 0.5)
paper-slider-font-color: "#000"
ha-slider-background: none !important
# Labels
label-badge-background-color: "#23232E"
label-badge-text-color: "#F1F1F1"
label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode
# Cards
card-background-color: var(--secondary-background-color) # Unused entities table background
paper-listbox-background-color: var(--primary-background-color)
ha-card-border-radius: 7px #reduced from 20
ha-card-background: "#0a0a0a60"
paper-card-background-color: var(--ha-card-background)
# Toggles
paper-toggle-button-checked-button-color: "#484848"
paper-toggle-button-checked-bar-color: "#484848"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
# Table row
table-row-background-color: var(--colour-row1)
table-row-alternative-background-color: var(--colour-row2)
# Switches
switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode
switch-checked-button-color: "#FFF"
# Other
paper-dialog-background-color: rgba(55, 55, 55, 0.6)
paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself)
more-info-header-background: rgba(25, 25, 25, 0.5)
# Custom
mcg-title-letter-spacing: .15em
mini-media-player-base-color: white
mini-media-player-icon-color: white
# mini-media-player-artwork-opacity: 0.7 # causing some bug
# HACS
hacs-badge-color: 'var(--primary-color)' # New Badge
hacs-status-installed: 'var(--text-color)' # Installed Icon
hacs-status-pending-restart: 'var(--text-light-color)' # Restart Icon
hacs-status-pending-update: 'var(--accent-color)' # Update Icon
My custom compact header config:
custom_header:
active_tab_color: var(--colour-yellow)
background: var(--header-image)
compact_mode: true
elements_color: var(--button-active)
tab_indicator_color: var(--colour-yellow)
Example of light button:
entity: light.table_lamp
name: Table Lamp
template: lightswitch_bc_template
type: 'custom:button-card'
Lightswitch_bc_template from RAW config:
button_card_templates:
lightswitch_bc_template:
aspect_ratio: 1/1
color: auto
hold_action:
action: more-info
haptic: light
show_state: false
size: 45%
state:
- styles:
card:
- background-color: var(--button-active)
name:
- color: var(--button-active-text)
value: 'on'
styles:
card:
- font-size: 100%
tap_action:
action: toggle
haptic: light
Title Examples:
Welcome home:
content: |
## Welcome home, {{user}}
style: |
ha-card {
margin: 0px 14px -5px 14px;
box-shadow: none;
background: none;
}
ha-icon {
float: right;
}
h2 {
font-size: 26px;
font-weight: 100;
padding-left: 10px;
border-left: 3px solid var(--colour-yellow);
}
type: markdown
Room Heading:
content: |
## Navigation
style: |
ha-card {
margin: 0px 14px -5px 14px;
box-shadow: none;
background: none;
}
ha-icon {
float: right;
}
h2 {
font-size: 18px;
font-weight: 100;
padding-left: 10px;
border-left: 3px solid rgba(253, 187, 45);
}
type: markdown
Status Icons:
double_tap_action:
action: more-info
entity: binary_sensor.home_occupied
show_name: false
show_state: false
state:
- color: var(--disabled-text-color)
icon: 'mdi:home-circle-outline'
value: 'off'
- color: var(--primary-color)
icon: 'mdi:home-circle'
value: 'on'
style: |
ha-card {
background: none;
box-shadow: none;
}
tap_action:
action: none
type: 'custom:button-card'
5 Likes
Excellent. Thank you.
Thanks mate!
From what I can tell try this in a theme:
ha-card-header-color: var(--primary-color)
unfortunately I donât see one for font-weight halfway there tho right?
Hi community,
could anyone please give me a hint where to fix this issue?
First of all this is my current theme (as seen before in this thread):
trantsprent_theme:
# Main colors
# https://www.color-hex.com/color/5294e2
primary-color: '#5294E2' # Header
accent-color: '#E45E65' # Accent color
dark-primary-color: 'var(--accent-color)' # Hyperlinks
light-primary-color: 'var(--accent-color)' # Horizontal line in about
ha-card-border-radius: '6px'
ha-card-background: 'rgba(150, 150, 150, 0.1)'
# Text colors
primary-text-color: '#FFFFFF' # Primary text colour, here is referencing dark-primary-color
text-primary-color: 'var(--primary-text-color)' # Primary text colour
# secondary-text-color: '#5294E2' # For secondary titles in more info boxes etc.
secondary-text-color: '#74a9e7' # For secondary titles in more info boxes etc.
disabled-text-color: '#7F848E' # Disabled text colour
label-badge-border-color: 'green' # Label badge border, just a reference value
# Background colors
# primary-background-color: '#383C45' # Settings background
primary-background-color: '#4b4f57' # Settings background
secondary-background-color: '#383C45' # Main card UI background
divider-color: 'rgba(0, 0, 0, .12)' # Divider
# Table rows
table-row-background-color: '#353840' # Table row
table-row-alternative-background-color: '#3E424B' # Table row alternative
# Nav Menu
paper-listbox-color: 'var(--primary-color)' # Navigation menu selection hoover
paper-listbox-background-color: '#2E333A' # Navigation menu background
paper-grey-50: 'var(--primary-text-color)'
paper-grey-200: '#414A59' # Navigation menu selection
sidebar-icon-color: 'var(--primary-color)'
# Paper card
paper-card-header-color: 'var(--accent-color)' # Card header text colour
paper-card-background-color: 'rgba(150, 150, 150, 0.1)' # Card background colour
paper-dialog-background-color: '#434954' # Card dialog background colour
paper-item-icon-color: 'var(--primary-text-color)' # Icon color
paper-item-icon-active-color: '#F9C536' # Icon color active
paper-item-icon_-_color: 'green'
paper-item-selected_-_background-color: '#434954' # Popup item select
paper-tabs-selection-bar-color: 'green'
card-background-color: 'var(--paper-card-background-color)'
# Labels
label-badge-red: 'var(--accent-color)' # References the brand colour label badge border
label-badge-text-color: 'var(--primary-text-color)' # Now same as label badge border but that's a matter of taste
label-badge-background-color: '#2E333A' # Same, but can also be set to transparent here
label-badge-background: 'rgba(255, 255, 255, 0.1)'
# Switches
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--accent-color)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
# Google colors
google-red-500: '#E45E65'
google-green-500: '#39E949'
# Sidebar
sidebar-background-color: 'var(--primary-background-color)'
sidebar-icon-color: 'var(--primary-text-color)'
sidebar-selected-icon-color: 'var(--primary-color)'
sidebar-selected-text-color: 'var(--primary-text-color)'
sidebar-text-color: 'var(--primary-text-color)'
slider-bar-color: 'var(--disabled-text-color)'
slider-color: 'var(--primary-color)'
slider-secondary-color: 'var(--light-primary-color)'
# Table
table-row-background-color: 'var(--primary-background-color)'
table-row-alternative-background-color: 'var(--secondary-background-color)'
data-table-background-color: 'var(--primary-background-color)'
# compact-custom-header https://github.com/maykar/compact-custom-header/wiki/Styling-Config
# cch-background: 'rgba(150, 150, 150, 0.2)'
In most of the drop-down menues the backround color is rendered correctly:
But all drop-downs under the development-tools are shown with transparent packground and therfore are hard to read:
I havenât figured it out yet and would appreciate every bit of help.
THX to all of you!
It is card-background-color.
U use the value from paper-card-background-color. And there is a transparency (0.1).
2 Likes
Danm @Krocko, you are genius!!
Changed it to card-background-color: var(--paper-listbox-background-color) and everything is fine.
Thank you and have a good one!