Clear Theme

Thank you very much. I will update the post as soon as I can test the theme on the 0.89 release.

Can you please also let me know when you’re done? :slight_smile:

By the way, I have added slightly rounded corners with ha-card-border-radius: 5px for the cards to your theme for me.
This looks imho even more material like.

Still a lot to tinker and play with :smile:
Thank you for your great work!

Btw, how did you combine your Button Cards for the lighting modes within one card @naofireblade ?
No matter what I try, I always have empty space between the buttons (see screenshot top right).

4 Likes

nice indeed
missed it before maybe, but what’s the card in blue for the weather conditions? could you share the code for that please? I like the condensed information set :wink:

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! :wink:

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. :wink:

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 :man_shrugging:
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 :slight_smile:

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 :wink: .

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:

image

2 Likes

Beautiful! You theme and solutions are solving a lot for me at the moment :wink:

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. :wink:
Thank you

…::edit::…
I just found out that I can continue to use my previous input_booleans with your code as well :slight_smile:
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. :wink:

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.