Clear Theme Dark

Hello. Excuse the question. I bet it might sound dumb to you guys but. When you say: Save the background image to home-assistant/www/night.jpg
where is that location?

Hey Ellery,

its the ‘www’ folder inside your config folder.

In other words: In the folder with your yaml files is a subfolder named ‘www’. If not, just create a new folder and rename it as ‘www’.

Alright! Thank you so much. All this is new to me. Really cool and useful but I have a lot to learn. :grin:. Thank you so much for replying.

Thats not fixable at the moment, because the media-control card uses the primary color as background-color: https://github.com/home-assistant/frontend/blob/7c6ba1a78299df4114b0161c940c9dd1a9c1e8bd/src/panels/lovelace/cards/hui-media-control-card.ts#L782

Thanks! Fixed in newest version

That needs to be fixed in the mobile app. The app currently does not use the new variable app-header-background-color to determine the status bar color.

Thanks for the very nice theme!

Who may assist - I would like to have the icons on the picture-elements card blink when activated.

picture-elements icon

This is my ui-lavelace.yaml:

- entity: switch.testswitch2
  type: state-icon
  icon: 'mdi:window-closed'
  tap_action:
    action: more-info
  style: |
    @keyframes blink {
      50% {
        :host {
          --primary-color: red;
        }
      }
    }
    ha-card {
      animation: {% if is_state('switch.testswitch2', 'on') %} blink 1.5s steps(1) infinite {% endif %};
    }

Unfortunately the icon won’t change its color.

layout-card, card-mod and custom-header are installed and working.

Any hints?

My weather card looks disaligned and with off margins. Any idea what could this be?

I’m having the same issue, but I’m more annoyed by the lack of Media Controls I was used to having before. I recall being able to control the volume and other things without having to press the three dots up right.

I have tried uninstalling the theme and other related components to no avail.

These are two different problems you are experiencing. :slight_smile: #1 is the problem evb mentioned, the other one, #2 is with the media controls. This is something you should check at the documentation or the corresponding thread for the media-control card.

or you could try this custom_card:

Afternoon All,

I’m trying to figure out why a specific colour is being used for certain icons when using this theme. As far as I can tell this colour isn’t called for in the theme. I can’t find it in the clear-dark.yaml, but I can find it in the custom:mini-graph-card-bundle.js, and I am using this card nested in this vertical stack. Is that somehow influencing the theme?

mgc

cards:
  - cards:
      - entity: scene.q7jxkjtkcfji1nw4
        icon: 'mdi:radiator'
        name: Heat
        state_color: true
        tap_action:
          action: call-service
          service: ifttt.trigger
          service_data:
            event: ds_split_heat
        type: 'custom:button-card'
      - entity: scene.0bur1u8q55wflghv
        icon: 'mdi:snowflake'
        name: Cool
        state_color: true
        tap_action:
          action: call-service
          service: ifttt.trigger
          service_data:
            event: ds_split_cool
        type: 'custom:button-card'
      - entity: scene.7dmi62dwiietujdn
        icon: 'mdi:fan'
        name: Fan
        state_color: true
        tap_action:
          action: call-service
          service: ifttt.trigger
          service_data:
            event: ds_split_fan
        type: 'custom:button-card'
      - entity: scene.ostredmlwuzldksy
        icon: 'mdi:toggle-switch-off'
        name: 'Off'
        state_color: true
        tap_action:
          action: call-service
          service: ifttt.trigger
          service_data:
            event: ds_split_off
        type: 'custom:button-card'
    type: horizontal-stack
  - color_thresholds:
      - color: '#5989fe'
        value: 12
      - color: '#59a9fe'
        value: 14
      - color: '#59ddfe'
        value: 16
      - color: '#59fee0'
        value: 18
      - color: '#59feb3'
        value: 20
      - color: '#59fe7c'
        value: 22
      - color: '#6Dfe59'
        value: 24
      - color: '#9dfe59'
        value: 26
      - color: '#cffe59'
        value: 28
      - color: '#cffe59'
        value: 30
      - color: '#fec059'
        value: 32
      - color: '#fe8b59'
        value: 34
      - color: '#fe5959'
        value: 36
    entities:
      - sensor.downstairs_temp
    hours_to_show: 24
    icon: 'mdi:thermometer'
    line_width: 2
    name: 24 Hours
    points_per_hour: 1
    show:
      extrema: true
      fill: false
      icon: true
      icon_adaptive_color: true
      labels: false
      labels_secondary: false
      name: true
      points: true
    smoothing: true
    type: 'custom:mini-graph-card'
  - cards:
      - entity: sensor.downstairs_humidity
        name: Humidity
        type: entity
      - entity: sensor.downstairs_battery
        name: Sensor Life
        type: entity
    type: horizontal-stack
title: Downstairs
type: vertical-stack

Nevermind, I figured it out. The theme didn’t attempt to change the original colour in the first place!

I’m seeing a few buttons that use the lighter gray background where the font colour conflicts and you can’t actually see the text - examples below from the automations page and one of my components. I’m not very savvy with the theme code - can someone point me in the right direction of resolving this?
image

image

Did you resolved that? I have the same issue.

I never did resolve it, no. Unfortunately I just don’t seem technical enough to figure this one out on my own with the theme code and after two months without an answer here I’m feeling there isn’t much interest from the crowd either lol

I also have this issue :weary:

Why do my cards have a much rounder corner than all the screenshots I see for this theme?

Probably because of the frontend change introduced in HA 2022.11 - one of the discussions is here: 2022.11: Card borders

Guys, solution is not so hard.

Just comment out in the theme yaml this line:

primary-color: 'var(--text-color)'

Then restart HASS and Ctrl+F5 in browser to force reload of styles.

Thx, I will test and apply the fix to the repo.