It’s a new card
1 Like
What is type of heating thermostat and for mediaplayers on your screen ? Thermostat looks very great.
Please share me your config…
I’m using this for my thermostats:
and for my media players this one:
That looks great, thanks!
But I’m a dumb newbie, and I’m not clear on how to install it. The instructions say to
2. Configure Lovelace to load the card: resources: - url: /local/simple-thermostat.js?v=1 type: module
Does this go in the Lovelace Configure UI / raw config editor? Where in that file?
Then there’s this:
Example usage: cards: - type: custom:simple-thermostat entity: climate.my_room step_size: 1 sensors: - entity: sensor.fibaro_system_fgwpef_wall_plug_gen5_energy - entity: sensor.fibaro_system_fgwpef_wall_plug_gen5_power name: Energy today - attribute: min_temp name: Min temp hide: mode: true
Where does that go? In the existing “cards:” section? Obviously I’ve got to figure out the name of my own sensors, but I think I can handle that.
I apologize for all these questions, but I really want to start learning this stuff, and I keep finding I’m missing key pieces of the puzzle.
Nice config! Also very interested in the code of your thermostat and weather!
EDIT: you’ve already shared everything, thanks! 
Hi @CaptTom,
If you haven’t done so yet, you must first download the simple-thermostat.js file and save it in the “www” directory under your Homeassistant root directory.
You can find the file here: https://github.com/nervetattoo/simple-thermostat/releases/tag/0.18.1
If you don’t have a “www” directory yet, you can simply create one and save the file in it.
Then you have to refer to the corresponding file, preferably via the Lovelace Raw Editor:
resources:
- url: /local/simple-thermostat.js?v=1
type: module
This belongs at the beginning of your lovelace raw file.
Then you can simply add the new simple thermostat card (preferably also via the raw editor).
In my example I packed the two thermostat cards into a vertical stack so that they always stay together:
- cards:
- entity: climate.heizung_bad
type: 'custom:simple-thermostat'
- entity: climate.heizung_buro
type: 'custom:simple-thermostat'
type: vertical-stack
Feel free to send me a PM if you have further questions. Then we won’t waste this thread on topics that have nothing to do with the theme itself.
This theme is pretty close to exactly what I’m looking for, a nice clean material type style (yeah, I’m a Google fan boy 
But it’s not quite looking like the screenshot
And what variable would I change to change the colour of an active light card, like I’ve highlighted?
And the colour of the header bar?
Many thanks for the awesome work!
I’m interested in the answer to this one too 
I use the custom tiles card for the button row without spaces. It requires a bit more of configuration but the gap in the normal card anoyed me .
Tiles card: https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card
This is my config:
card_settings:
background: var(--paper-card-background-color)
columns: 4
gap: 24px
title: Livingroom
entities:
- entity: script.livingroom_lights_bright
icon: 'mdi:brightness-7'
label_sec: Bright
templates:
icon_color: >-
if (entities["binary_sensor.script_livingroom_lights_bright"].state ==
"on") return "var(--accent-color)"; else return "var(--text-color)";
- entity: script.livingroom_lights_normal
icon: 'mdi:brightness-6'
label_sec: Normal
templates:
icon_color: >-
if (entities["binary_sensor.script_livingroom_lights_normal"].state ==
"on") return "var(--accent-color)"; else return "var(--text-color)";
- entity: script.livingroom_lights_cozy
icon: 'mdi:brightness-4'
label_sec: Cozy
templates:
icon_color: >-
if (entities["binary_sensor.script_livingroom_lights_cozy"].state ==
"on") return "var(--accent-color)"; else return "var(--text-color)";
- entity: script.livingroom_lights_off
icon: 'mdi:power-standby'
label_sec: Lights off
templates:
icon_color: >-
if (entities["binary_sensor.script_livingroom_lights_off"].state ==
"on") return "var(--accent-color)"; else return "var(--text-color)";
global_settings:
background:
value: none
icon:
color: var('--paper-item-icon-color')
size: 2.3em
type: 'custom:tiles-card'
If you want to use that for light scenes like me, you will need template sensors to check which scene is currently active. These template sensors decide if the icon is highlighted in a blue color = active.
script_livingroom_lights_bright:
value_template: "{{ is_state('light.todesstern', 'on') and states.light.todesstern.attributes.brightness|int == 254 }}"
script_livingroom_lights_normal:
value_template: "{{ is_state('light.todesstern', 'on') and states.light.todesstern.attributes.brightness|int == 127 }}"
script_livingroom_lights_cozy:
value_template: "{{ is_state('light.couch', 'on') and states.light.couch.attributes.brightness|int == 76 }}"
script_livingroom_lights_off:
value_template: "{{ is_state('light.couch', 'off') and is_state('light.todesstern', 'off') and is_state('light.papierlampe', 'off') and is_state('light.kugel', 'off') }}"
Meanwhile I added harmony activity buttons as well:
2 Likes
Beautiful! You theme and solutions are solving a lot for me at the moment
1 Like
So far I have used input_booleans and automations for this, which also works great.
But I’m definitely gonna take a look at your solution to get rid of the gaps.
Thank you
…::edit::…
I just found out that I can continue to use my previous input_booleans with your code as well 
Thanks again @naofireblade
- card_settings:
background: var(--paper-card-background-color)
columns: 4
gap: 24px
title: Wohnen
entities:
- entity: input_boolean.switch_wohnzimmer_beleuchtung_hell
icon: 'mdi:brightness-5'
label_sec: Hell
templates:
icon_color: >-
if
(entities["input_boolean.switch_wohnzimmer_beleuchtung_hell"].state
== "on") return "var(--accent-color)"; else return
"var(--text-color)";
- entity: input_boolean.switch_wohnzimmer_beleuchtung_gemuetlich
icon: 'mdi:brightness-6'
label_sec: Gemütlich
templates:
icon_color: >-
if
(entities["input_boolean.switch_wohnzimmer_beleuchtung_gemuetlich"].state
== "on") return "var(--accent-color)"; else return
"var(--text-color)";
- entity: input_boolean.switch_wohnzimmer_beleuchtung_automatik
icon: 'mdi:brightness-auto'
label_sec: Automatik
templates:
icon_color: >-
if
(entities["input_boolean.switch_wohnzimmer_beleuchtung_automatik"].state
== "on") return "var(--accent-color)"; else return
"var(--text-color)";
- entity: input_boolean.switch_wohnzimmer_beleuchtung_aus
icon: 'mdi:power-standby'
label_sec: Aus
templates:
icon_color: >-
if
(entities["input_boolean.switch_wohnzimmer_beleuchtung_aus"].state
== "on") return "var(--accent-color)"; else return
"var(--text-color)";
global_settings:
background:
value: none
icon:
color: var('--paper-item-icon-color')
size: 2.3em
type: 'custom:tiles-card'Got it. It’s working great, thanks!!
It looks like some great things are happening here and I don’t want to get in the way!
Still, when something like this is made available, it would help to include more details about the install process. It would cut way down on noob questions like mine, and it would make the whole project seem a little more accessible to beginners. Thank you!!
1 Like
I totally agree with you. Will remember that for the future. 
I get this activated blue border when I click one of the icons. I’ve tried to reverse engineer in developer console in browser to see if this is something in the css, but I can’t figure it out. If I click anywhere else on the screen, the blue border goes away, but I rather not have it there at all. Any tips?
I did not tried the header bar yet. But I think white fits well?
The lamp icon will have the correct blue color (accent-color) if you set the light to full brightness. If you dim it down, home assistant will dim the icon. Therefore you see a darker blue.
I just realized something.
If you add
lovelace-background: 'center / cover no-repeat url("/local/background_light.jpg") fixed'
to the theme and then
background: var(--lovelace-background)
to ui-lovelace.yaml or in the raw editor, you get theme controlled background images in lovelace!
7 Likes
I’m really digging this theme. Thanks for sharing.
Do you know if theres a way to set a background image to the header?
Alternatively: expand the background to the header and giving it transparency?
Awesome! I added instructions to install the theme dependent background for both themes.
There is not.
1 Like