any update available for transparent theme as there are lots of things going white no fonts cant be seen in entitiy registry, integration and all other options available in configuration.
Please provide.
thanks in adv.
Just adden one of two lines by myself.
Entity page is shown correct with this one:
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'
# compact-custom-header https://github.com/maykar/compact-custom-header/wiki/Styling-Config
cch-background: 'rgba(150, 150, 150, 0.2)'
1 Like
Thanks
let me try
I am also trying to use it.
I cannot get the look and feel of the card.
Is it possible to get the how you made the cards background transparent? didn-t quite get it from the webpage
also the sensor config for darksky would be appreciated…
The weather map is also dark sky?
Hi
Please could someone give me some guidance on the following:
th
- How do I round the items circled in blue?
- How do I change the color of the items marked in red?
Any help much appreciated.
Can you share on priv code for your sheduler as you show on screen?
in the theme yaml file add this:
ha-card-border-radius: '20px'
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.