Thank you!
I did not think to just duplicate the class name. I thought that would conflict with or overwrite the previous instance.
Now everything lines up.
I finally put together some form of documentation!
Hereās how to get started with supercharging your themes: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes
4 Likes
Thanks, this solves the hide header problem now when Custom Header has been archived. I have an issue though; I would like to hide the chevrons next to the tab icons while hiding the top header. Looked in your documentation and did this:
# Card mod enabler
card-mod-theme: DarkMode
# Hide header
card-mod-root: |
app-toolbar {
display: none;
}
# Hide chevrons
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
This hides the chevrons but the top header is still there. If I remove the hide chevrons part the top header disappears. Seems like the card-mod-root and the card-mod-root-yaml statements conflicts with one another somehow, or am I just missing something? HA 0.116.
Can you clarify (perhaps with screenshots/mockups)?
I cannot do the two parts of the code above (hide header and hide chevrons) at the same time.
If I do both or only the āhide chevronsā I get:
If I only do the āhide headerā I get:
I want the header hidden and the chevrons (which are not visible - the empty space left of the home icon) hidden at the same time. The card-mod-root-yaml statement seems to override the card-mod-root statement so that the hiding of the app-toolbar gets ignored.
Think you missed a newline:
# Hide chevrons
card-mod-root-yaml: |
paper-tabs:
$: |
.not-visible {
display: none;
}
I got the code from the theme cookbook (https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook) and that is the code that actually always works so I would guess not 
You have overlapping stuff. Canāt mix -yaml and non-yaml.
# Hide chevrons
card-mod-root-yaml: |
.: |
app-toolbar {
display: none;
}
paper-tabs$: |
.not-visible {
display: none;
}
Thanks, almost there now. I guessed that it was conflicting and tried merging but I didnt know about the ā.:ā part.
Now I however get this:
Seems like the background doesnt reposition itself after removing the app-toolbar.
Edit: Only seems to be happening on the laptop after at full refresh. The iPhone is ok.
I have that bug too. Try resizing the window. Can you send the full theme yaml so I can try to find a fix?
Yeah I noticed it popped back up after changing tabs.
DarkMode:
card-mod-theme: DarkMode
ha-card-border-radius: "15px"
# MyVariables
base-hue: '200' #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: '0%' #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: "#334d50" #"#000000" #"#334d50" #"#606060" # "#03a9f4" # "#808080" # 'hsl(var(--huesat) 50%)' #header colors and some text colors
second-background-color: "#cbcaa5"
dark-primary-color: 'hsl(var(--huesat) 60%)'
light-primary-color: 'hsl(var(--huesat) 30%)'
accent-color: 'hsl(var(--huesat) 30%)'
medium-grey-color: '#202020'
# Background image
# card-mod-view: |
# :host {
# background: url("/local/images/Anwar.jpg") !important;
# }
# lovelace-background: center top / 100% 100% no-repeat url("/local/images/Anwar.jpg") fixed
# background-image: 'center top / 100% round url("/local/images/dark_blue_green_gradient.jpg") fixed' #'center / cover no-repeat url("/local/images/dark_water.jpg")'
# background-color: '#08AEEA'
# lovelace-background: 'radial-gradient( circle 939px at 94.7% 50%, rgba(0,178,169,1) 0%, rgba(0,106,101,1) 76.9% )'
lovelace-background: 'linear-gradient( 0deg, var(--second-background-color) 7.8%, var(--primary-color) 94.2% )'
# Backgrounds
primary-background-color: "#000000" #"#121212" #"#334d50" #'hsl(var(--huesat) 16%)'
# secondary-background-color: "rgba(10, 10, 10, 0.85)"
secondary-background-color: "#101010" #'hsl(var(--huesat) 16%)' # background behind cards that are off
sidebar-background-color: "#101010" #"#121212" #'hsl(var(--huesat) 16%)'
sidebar-selected-background-color: "#1B1D26"
paper-listbox-background-color: "#121212" #'hsl(var(--huesat) 16%)' # sidebar background
ha-card-background: "#00000080" #"#1D1D1D" #'hsl(var(--huesat) 12%)' # background behind cards that are on
paper-dialog-background-color: "#000000E6" #'var(--paper-card-background-color)' # background color in more-info
table-row-background-color: 'hsl(var(--huesat) 12%)'
table-row-alternative-background-color: 'hsl(var(--huesat) 10%)'
card-background-color: "#101010" #"#121212" #"#334d50"
# Divider
divider-color: 'hsla(0, 0%, 0%, 0)'
dark-divider-opacity: '0'
light-divider-opacity: '0'
dark-secondary-opacity: '1'
# Text colors
primary-text-color: 'hsl(var(--huesat) 90%)'
text-primary-color: "#ffffff" #'hsl(var(--huesat) 90%)'
secondary-text-color: 'hsl(var(--huesat) 80%)'
disabled-text-color: 'hsl(var(--huesat) 70%)'
# sidebar-text_-_color: 'hsl(var(--huesat) 90%)'
# sidebar-text-color: 'hsl(var(--huesat) 90%)'
sidebar-selected-text-color: "var(--sidebar-selected-icon-color)"
sidebar-text-color: "#F1F1F1"
# paper-card-header-color: 'hsl(var(--huesat) 90%)'
# paper-button-ink-color: 'hsl(var(--huesat) 50%)'
# Text Adjustments
paper-font-headline_-_letter-spacing: '-0.5px'
paper-font-headline_-_font-weight: '400'
paper-font-body1_-_font-weight: '300'
# Nav Menu
paper-listbox-color: 'hsl(var(--huesat) 50%)'
paper-grey-50: 'hsl(var(--huesat) 50%)'
paper-grey-200: 'hsl(var(--huesat) 10%)' #active menu item
# sidebar-icon-color: 'hsl(var(--huesat) 50%)' #iron-icon-fill-color
sidebar-icon-color: "#BDBDBD"
sidebar-selected-icon-color: "#FFF"
# Paper card
paper-item-icon-color: 'hsl(var(--huesat) 40%)'
#paper-item-icon-active-color: 'var(--paper-item-icon-color)'
paper-item-icon_-_color: 'var(--paper-item-icon-color)'
paper-item-selected_-_background-color: 'hsla(0, 0%, 0%, 0.2)'
paper-item-selected_-_color: 'hsl(var(--huesat) 20%)' #?
paper-tabs-selection-bar-color: 'hsla(0, 0%, 0%, 0.2)'
paper-tab-ink: 'hsl(var(--huesat) 70%)'
paper-input-container-color: 'hsl(var(--huesat) 60%)'
# Labels
label-badge-red: 'var(--ha-card-background)'
label-badge-border-color: 'var(--label-badge-red)'
label-badge-background-color: 'var(--ha-card-background)'
label-badge-text-color: 'var(--primary-text-color)'
# Shadows
shadow-elevation-2dp_-_box-shadow: '0px 0px 0px 0px hsl(var(--huesat) 10%)'
shadow-elevation-16dp_-_box-shadow: '0px 0px 0px 0px hsl(var(--huesat) 25%)'
ha-card-box-shadow: "0px 0px 1px #ffffff00" # Ingen skugga bakom kort sƄ att headers fungerar
# Switches
paper-toggle-button-checked-button-color: 'hsl(var(--base-hue), 90%, 50%)'
paper-toggle-button-checked-bar-color: 'hsl(var(--huesat) 25%)'
paper-toggle-button-unchecked-button-color: 'hsl(var(--huesat) 25%)'
paper-toggle-button-unchecked-bar-color: 'hsl(var(--huesat) 5%)'
switch-unchecked-button-color: "#666666"
switch-unchecked-track-color: "#707070"
switch-checked-button-color: "#909090"
switch-checked-track-color: "#999999"
# Sliders
paper-slider-knob-color: 'hsl(var(--base-hue), 90%, 50%)' #"#334d50"
paper-slider-knob-start-color: 'hsl(var(--base-hue), 80%, 25%)' #"#334d50"
#paper-slider-pin-color: "#121212" #'hsl(var(--base-hue), 90%, 50%)'
paper-slider-active-color: 'hsl(var(--base-hue), 90%, 50%)' #"#334d50"
paper-slider-container-color: 'hsl(var(--huesat) 28%)'
paper-slider-secondary-color: 'hsl(var(--huesat) 90%)'
paper-slider-disabled-active-color: 'hsl(var(--base-hue), 80%, 25%)'
paper-slider-disabled-secondary-color: 'hsl(var(--base-hue), 80%, 25%)'
# paper-dialog-color: "#121212" #'hsl(var(--base-hue), 20%, 80%)' # ikoners fƤrg i more-info
#Changes to fix history/logbook menus
lumo-primary-text-color: 'var(--primary-color)'
lumo-secondary-text-color: 'var(--primary-color)'
lumo-primary-color: 'var(--primary-color)'
lumo-primary-color-50pct: 'rgba(37,129,172, .5)'
lumo-primary-color-10pct: 'rgba(37,129,172, .1)'
#Calendar day numbers
lumo-body-text-color: 'var(--primary-text-color)'
#Calendar/Date-Picker Background
lumo-base-color: 'var(--medium-grey-color)'
#Month/Year header
lumo-header-text-color: 'var(--lumo-body-text-color)'
#DayOfWeek Header
lumo-tertiary-text-color: 'var(--lumo-body-text-color)'
# Background of date in History/Logbook that you clcim to view date-picker
lumo-shade: 'var(--medium-grey-color)'
lumo-shade-90pct: 'rgba(41, 41, 41, .9)'
lumo-shade-80pct: 'rgba(41, 41, 41, .8)'
lumo-shade-70pct: 'rgba(41, 41, 41, .7)'
lumo-shade-60pct: 'rgba(41, 41, 41, .6)'
lumo-shade-50pct: 'rgba(41, 41, 41, .5)'
lumo-shade-40pct: 'rgba(41, 41, 41, .4)'
lumo-shade-30pct: 'rgba(41, 41, 41, .3)'
lumo-shade-20pct: 'rgba(41, 41, 41, .2)'
lumo-shade-10pct: 'rgba(41, 41, 41, .1)'
lumo-shade-5pct: 'rgba(41, 41, 41, .05)'
#Removes Gradient in Calendar/Date-Picker and Drop-down lists
lumo-tint-5pct: 'var(--darker-grey-color)'
# filips custom
markdown-code-background-color: "#00000080"
# Card mod enabler
card-mod-theme: DarkMode
# Hide chevrons and header
card-mod-root-yaml: |
.: |
app-toolbar {
display: none;
}
paper-tabs$: |
.not-visible {
display: none;
}
The card-mod code is at the bottom.
Cool theme! Anyway, this is a known issue. @thomasloven could fix this by calling 0.5-1 seconds after load:
window.dispatchEvent(new Event('resize'));
Also you could make the background color the primary color.
Ok, thanks anyway, it works as I wanted now.
Iāll have to think about the background. I have a color gradient as background and I really dont want to replace it with a fixed color. Hopefully Thomas finds a fix for this eventually.
Thanks again for your help
Edit: I changed to a fixed color and set the primary-background-color to the same color as the lovelace-background. Looks sweet now!
What does it show in the template tab of developer tools? Also looks like you arenāt developing a theme, so maybe wrong thread.
maybe wrong threadā¦ just standard card modā¦
So Iād like some global way of mapping paper-item-color to state-icon-colorā¦ now I know I can do that with card mod on a card and I could also just edit the offending themes but that makes it hard when the theme maker updates a theme.
This is an example of what I mean.
With Google Dark Theme:
With ios-dark-mode-blue-red
Is it possible to overide a theme with card-mod?
mytheme:
paper-item-color: var(--state-icon-color)
You should be able to override a theme if you specify it for everything you want to override it with. Also looks like youāre using button-card, you can try color as well.
so I donāt understandā¦ do I put that at the top in Lovelace config?
The buttons are only an example. Even in the entities card some theme makers insist on doing screwy stuff with the colours so I want to be able to override all specific variables.
So at the top of my lovelace I have:
title: Home
custom_header:
header_text: '{{ deviceID }}' # Must set compact_mode: false to display
compact_mode: true
# background: var(--app-header-background-color)
background: var(--background-image)
# elements_color: var(--primary-text-color)
# active_tab_color: var(--state-icon-active-color)
# tab_indicator_color: var(--state-icon-active-color)
swipe_nav:
wrap: true
animate: swipe # could also use fade or flip
swipe_amount: 15
views:
Would I just add the above yaml below title: ?
Donāt worry about that yaml, just declare all possible CSS vars in your styling with card-mod.
I donāt understand.
I just want to be able to overwrite one variable with another so if I change theme I donāt get unpredictable results.
I tried this:
title: Home
mytheme:
paper-item-icon-color: var:(--state-icon-color)
paper-item-icon-active-color: var:(--state-icon-active-color)
but it doesnāt work. If I switch from ios theme to the google one I still get different color icons as per above screenshot and also this:
where all icons should be the same color. The problem is theme writers are inconsistent.