Clear Theme Dark

Yes I will update with a fix.

Updated to fix the not readable dark texts. You will need at least home assistant 0.103 for this.

Perfect, thanks for all your work!

Hey @naofireblade, in the latest version I noticed that the badge text had become a bit hard to read:

hass_theme

Because I figured I’ve been bothering you too much already :grimacing: I tried to mod it myself, and ended up adding this to your theme:

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

Which made it much more readable, though perhaps a bit too bright:

hass_theme_new

It’ll do though, thought I’d let you know.

1 Like

Hi,

I get the following on screen after installing the Home Assistant version 0.107.1 for the new media cards (redesigned in this new version)
Home Assistant 0.107.1 new media cards

When I revert to the default theme, we see:
Home Assistant 0.107.1 new media cards default theme

Regards,

@evb: same here

@naofireblade: any chance we can sweettalk you into fixing this? :innocent:

I will look into this in the next few days. :slight_smile:

1 Like

I also have the same issue with media control cards being way too light. On the iOS app, the very top status bar is the same color.
Any ideas which theme elements control these colors?

I found that both the media control card and iOS status bar can be changed with ‘primary-color’ but obviously that changes a ton of others also.

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