themes are in /config/themes/[insertthemenamehere]/[themename].yaml
I know where the themes are.
My question still is can I override variables set by a theme using card-mod without having to edit the theme???
I donāt want to edit the theme in any way as when a theme is updated I need to edit again etc.
Yeah, just do something like
style: |
* {
--theme-var: mything
}
on each card. You could also use card-mod theming to override the standard theming. And you can use YAML comments to comment out the old vars.
so there is no Global option to do this and I have to do it on every card?
how? I donāt see how to do that. I also canāt seem to get card-mod to hide the header. I think all the examples on the wiki are actually editing the theme. I donāt want to edit the theme, I want to override it.
A theme is the global option.
You are not understanding me.
I want to be able to set an option to override a theme variable (with another variable) so I can switch themes and that override will be used. So for instance for every theme I use I want to be sure the paper-item-color is overridden by the state-icon-color specified in that theme.
Is what I am trying to do really that difficult to understand.
Sorry, itās hard when someone doesnāt get me too. Is there anything you have against editing themes?
Yes!!!
If a dev updates the theme or if I download a new theme I have to edit it again. Whereas if I can just set it so a variable will ALWAYS be overridden with a different variable itās job done once.
as an example, I have a ThemeOverride.js file that has this in it:
document.documentElement.style.setProperty('--ha-card-border-radius', '10px');
and in configuration.yaml
frontend:
extra_module_url:
- /local/ThemeOverride.js
So every theme is overridden and I get a 10px rounding on every card regardless of what the theme specifies. I just want to be able to do this with variables as well instead of editing individual themes.
Consider making a new thread for this, or making a feature request for it.
So if you already have a solution that does this with another variableā¦ what was all this about?
Well I wanted to know if I could do this in card-mod and I have failed to make it work in the js file so as of now I have no solution.
1 Like
Well document.documentElement.style.setProperty('--paper-item-icon-color', 'var(--state-icon-color)'); (without the : between var and ( you accidentally added in one post) should do it, if itās possibleā¦
1 Like
Yeah I did have thatā¦ Thanks. Iāll try your suggestion.
Iām trying to use card-mod to replace the hide header component of custom header, I got this from the cookbook which reduces the header but still shows all the view buttons and chevrons etc;
no-header:
card-mod-theme: no-header
card-mod-root: |
app-toolbar {
display: none;
}
Can anyone point me in the right direction to completely hide the header?
@Pirol62 gave me the solution on the custom header thread.
card-mod-theme: night
card-mod-root: |
app-toolbar {
display: none;
}
app-header {
display: none;
}
PS: app-toolbar is obsolete. Will be hided anyway:
So:
card-mod-theme: night
card-mod-root: |
app-header {
display: none;
}
will be sufficiant.
2 Likes
OK Iāll remove then, thanks again.
document.documentElement.style.setProperty('--ha-card-border-radius', '10px');
document.documentElement.style.setProperty('--paper-item-icon-color', 'var(--state-icon-color)');
document.documentElement.style.setProperty('--paper-item-icon-active-color', 'var(--state-icon-active-color)');
Seems to have not worked
Hello, due to my limited English I am not very clear if it is possible to hide the following and add a black background to the header:
If you look at the cookbook in the wiki https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook this is supposed to remove the chevrons(arrows).
tabs-to-edge:
card-mod-theme: tabs-to-edge
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
You can add;
app-header-background-color: rgb(0,0,0) to your theme to change the header background color.
Hope this helps.
1 Like