mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 16:26:43 +00:00
Lovelace: Allow glance card to assume theme colors (#1732)
* Allow glance card to assume theme colors * Better configuration options * Added example to gallery * Fixing problems from review
This commit is contained in:
parent
2eb3a55f59
commit
362e758c40
@ -142,6 +142,21 @@ const CONFIGS = [
|
||||
- light.kitchen_lights
|
||||
`
|
||||
},
|
||||
{
|
||||
heading: 'Primary theme',
|
||||
config: `
|
||||
- type: glance
|
||||
theming: primary
|
||||
entities:
|
||||
- device_tracker.demo_paulus
|
||||
- media_player.living_room
|
||||
- sun.sun
|
||||
- cover.kitchen_window
|
||||
- light.kitchen_lights
|
||||
- lock.kitchen_door
|
||||
- light.ceiling_lights
|
||||
`
|
||||
},
|
||||
];
|
||||
|
||||
class DemoPicEntity extends PolymerElement {
|
||||
|
@ -22,6 +22,11 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
:host(.theme-primary) {
|
||||
--paper-card-background-color:var(--primary-color);
|
||||
--paper-item-icon-color:var(--text-primary-color);
|
||||
color:var(--text-primary-color);
|
||||
}
|
||||
.entities {
|
||||
display: flex;
|
||||
padding: 0 16px 4px;
|
||||
@ -90,6 +95,14 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
setConfig(config) {
|
||||
this._config = config;
|
||||
this.updateStyles({ '--glance-column-width': (config && config.column_width) || '20%' });
|
||||
|
||||
if (config && config.theming) {
|
||||
if (typeof (config.theming) !== 'string') {
|
||||
throw new Error('Incorrect theming config.');
|
||||
}
|
||||
this.classList.add(`theme-${config.theming}`);
|
||||
}
|
||||
|
||||
this._configEntities = processConfigEntities(config.entities);
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user