I added a themes directory and created a theme using the syntax. I can apply that theme to a user. What Im not finding documentation on or not seeing clearly is how do I add this theme to my lovelace page used by my tablets.
right. struggling with this core feature, but couldnāt find any post related, so figured where better to ask than the theme tinkerers topicā¦
modes:
dark:
according to the theme documentation should suffice to set a theme to use dark mode settings,
By using the new
modeskey plus the subkeydarkthis theme will now be based on the default dark theme.
amongst which the one I am looking for: change the Map (both menu left side as map cards and more-infoās) to use a dark background. It happened to me once, but after that, I havent seen the dark backgrounds.
Whatās more, using that alone throws errors in the config checker. It can not be an empty object.
Invalid config for [frontend]: expected a dictionary for dictionary value @ data['frontend']['themes']['Dark blue']['modes']['dark']. Got None
ok, so I move my dark themes dev tools template settings there (because that is unreadable anyway without customizing the theme colors, like:
modes:
dark:
codemirror-keyword: red #if else endif
codemirror-operator: yellow # > < + * |
codemirror-property: green # is_state( , )
# codemirror-variable: '#696969'
# codemirror-qualifier:
codemirror-def: orange
codemirror-number: lightblue # {% %}
codemirror-comment: slategray
# codemirror-meta:
# codemirror-atom:
codemirror-string: sandybrown # 'binary_sensor' 'off'
# codemirror-variable-2: gold
# codemirror-string-2: gold
# error-color:
and config checks fine.
How ever, my Map backgrounds still are using a light theme colorā¦
what am I missing here? please have a look with me? thanks!
btw, I do see the background colors of the entities plotted on the map change to Dark.
when the device I am working with turns to dark mode, the maps do change completely.
Can we not set that mode using a theme variable in our themes?
Itās explained in the link I posted: Home Assistant Frontend - Home Assistant
On your tablet: open sidebar ā click your name at the bottom ā select theme / or backend (and use service call to apply theme for all users that select backend).
Am I not able to apply this per a lovelace page? What your saying and IM seeing is it needs to be applied per user
I must be missing something. Doesnt appear I can apply it to a dashboard
No, you can not apply it to an entire Lovelace Dashboard. What I did (just this past weekend actually) was create a special tablet user, and assigned the theme to that user in the Home Assistant user profile page. Then itās applied to the entirety of Home Assistant, but just for that user, who is only signed in on the tablet, so my tablet dashboard has the tablet theme across all views, the top menu, and sidebar.
So I finally got this working with a combination of @Duke_boxās example and my original code, so I thought Iād let you guys know my result in case you want to continue developing something that works more universally. Here is the code which works in my config to produce a clock that fully replaces the three dots fully on the right hand side and leaves the menu functionality still working:
ha-button-menu::before {
content: "{{states('sensor.time')}}";
color: var(--text-primary-color);
visibility: visible;
position: relative;
font-size: 22px;
top: 27px;
}
ha-menu-button {
display: none !important;
}
ha-button-menu {
color: transparent;
}
@Ildar_Gabdullinās idea almost worked for me, it produced this. I couldnāt get it to move up enough to look right.
@Mariusthvdbās samples didnāt produce any clock (you can see my attempts with his here)
No idea why my config produces such a different result than your guysā, you can see my whole theme here if you are interested in what else I might be doing to influence this.
Iāve also just enabled this on some other kiosk devices where I was showing the date as well as the time, and for this position: relative didnāt make a box big enough to fit it, so it ended up on two lines. To get it to display on a single line I had to go back to position: absolute using Duke_boxās example and managed to get it working too. The key here seems to be to start by initially making the width a very large number like 400 and then reducing it until you get the box positioned in the right hand corner of the screen. With small numbers it wonāt display on the screen at all for me, which is likely why Mariusthvdbās examples didnāt work for me. Hereās the code that works for me for date and time:
ha-button-menu::before {
content: "{{states('sensor.time_formatted')}}";
color: var(--text-primary-color);
visibility: visible;
position: absolute;
font-size: 20px;
width: 230px;
top: 13px;
right: 0px;
}
ha-menu-button {
display: none !important;
}
ha-button-menu {
color: transparent;
}
Thank you. This is what I found from exploring
The parent container must be flex, the āclockā element must be centrally aligned in this flex container - see my example.
I had used your flex code, copy pasted straight in, unless I had something which counteracted it. I did want to get rid of the overflow menu as well, maybe that conflicted with your method?
Post your simplified code here, let other people see it.
You can see my theme code here. I had just tried replacing the blocks shown above with your code directly and left in the parts:
ha-menu-button {
display: none !important;
}
ha-button-menu {
color: transparent;
}
Hi,
I have this error in my logs.
Logger: frontend.js.latest.202111090
Source: components/system_log/__init__.py:190
First occurred: 10:08:02 (2 occurrences)
Last logged: 12:59:01
https://nauen.duckdns.org:8123/lovelace/monitor:0:0 Uncaught
That leads to this error in the browser console:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mod-card" has already been used with this registry
at https://nauen.duckdns.org:8123/hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524311:6:10674
I checked the dashboard resources and found the 190927524311 but only once. There is no second resource called mod-card.
Where is the bug?
There are examples in Github with using jinjia2 - this one, for example:
card-mod-glance: |
:host {
...
margin: 0 4px 12px;
...
/* Make icons red/green for on/off values and blue otherwise */
--paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue);
{% elif is_state(config.entity, 'on') %} var(--theme-green);
{% elif is_state(config.entity, 'open') %} var(--theme-green);
{% elif is_state(config.entity, 'unlocked') %} var(--theme-green);
{% elif is_state(config.entity, 'off') %} var(--theme-red);
{% elif is_state(config.entity, 'closed') %} var(--theme-red);
{% elif is_state(config.entity, 'locked') %} var(--theme-red);
{% else %} var(--theme-blue); {% endif %}
}
Unfortunately, I observe flickering if jinjia2 used in styles - see the GIF below:
Flickering occurs several times a minute.
Here flickering = changing margins.
I registered an issue:
Can anyone reproduce the condition?
Some time ago I also observed a similar flickering when jinijia2 was used with mod-card.
Update 11.06.22:
HA 2022.6.4, card-mod 3.1.5 - no flickering with an active card-mod-theme, closed the issue.
Wait what ā¦ that goes into a regular homeassistant theme then?
So that means you can define globals that get applied to pre-defined cards like the sidebar and menuās too?
If yes thats pretty awesome ā¦
Iām using card-mod to add a clock to my theme. How do I change it to a 12 hour clock instead of a 24 hour clock? Can I just edit my sensor,
- platform: time_date
display_options:
- "time"
- "date"
- "date_time"
- "date_time_utc"
- "date_time_iso"
- "time_date"
- "time_utc"
- "beat"
or can I edit my theme to do this?
card-mod-root-yaml: |
ha-button-menu ha-icon-button $: |
mwc-icon-button::before {
font-size: 22px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 80px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 14px;
right: 0px;
}
I looked at that before I posted but didnāt see an example of what I want to do. Templating is still over my head.