I’ll check later when I get home unless someone beats me to the punch.
1 Like
This attribute fixes the links in the purple theme:
dark-primary-color: 'var(--accent-color)' # Hyperlinks
For your red theme try:
paper-toggle-button-checked-button-color: 'var(--accent-color)'
1 Like
Hello sir!
Thanks for your reply, again.
I already have this on the red theme:
primary-color: "#d32f2f"
paper-toggle-button-checked-button-color: "var(--primary-color)"
I don’t have access right now to my other instance of HA, the one with the purple theme. Will try as soon as possible.
Thanks!
Can you please share the code for the pan & tilt sliders ? Thanks !
Hello again sir! Sorry to bother you.
I already have this on the purple theme:
dark-primary-color: '#f92aad'
accent-color: '#f92aad'
Theme has those problems:
And:
On the Red Theme I have those blue texts:
Thanks for your help, really appreciate it.
Have a great week!
You can find what attributes to change by using chrome.
1 Like
Will you, please, share the configuration of one of yours light buttons? Which card are you using?
Thanks, in advance…
that startrek theme is absolutely amazing!!! awesome work !
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
