🔹 Card-mod - Super-charge your themes!

Share your Projects! Themes
22

I would like to be able to specify the theme in the Dashboard/View and have that apply to the system more-info dialogue. Best I can tell right now is that I have to change the theme in user preferences for this to apply. Is that possible? Am I just doing it wrong? Thanks for any help.

BTW, love this, extremely powerful yet can manage things centrally without having to go through my entire set of YAML dashboard file every time i change something. Only challenge is that my CSS skills are next to non-existence, it is a bit like trying to read Egyptian Hieroglyphs; but I am getting there.

23

Well let’s just say that you are not aware that it can be done. There are theme options for just the more info dialogue box. e.g.

mdc-theme-surface: '#041D42'   # Pop-up background colour

And the current theme can be automated to be selected from the front end:

Screenshot_2020-08-07 Administration - Home Assistant

- id: select_theme
  alias: 'Select Theme'
  trigger:
  - platform: state
    entity_id: input_select.select_theme
  action:
    service: frontend.set_theme
    data_template:
      name: >
        {% if is_state('input_select.select_theme', 'Night') %}
          night
        {% else %}
          day
        {% endif %}

Just set your profile theme to “back-end selected” and this will work.

None of this needs card mod.

24

Perfect, and easy to boot. Thanks

25

Is it possible to apply CSS to ha-panel-lovelace instead of hui-root?

26

Why would you need that? To style the error screen?

27

Mainly to apply stuff to other panels and some editors.

1 Like
30

Any updates on how to do this? For my theme the integrations page looks bad:

2020-08-24-133156_1920x1080_scrot
2020-08-24-133156_1920x1080_scrot1849×615 43.1 KB

UPDATE: I was able to fix with ha-card-border-color.

31

Just heads up, thank you so much @thomasloven for your contributions to the Lovelace stuff. Half of the custom modules I’m using are yours including card-mod. I recently made Windows 10 inspired themes and I used card-mod to supercharge them. Here’s a repo for anyone interested.

2 Likes
32

I can’t get header theming to work in 0.115, anyone else?
Forgot to set --card-mod-theme correctly.

33

I can’t get backend-selected themes to work now with 0.115. If I set the theme manually, then it works. Any fixes?

34

I’ve been banging away at this one without success for days, so if anyone could help it would be apreciated.

I’m trying to remove the padding in a conditional card:

padding
padding1901×1056 603 KB

Card config (works):

  - type: 'custom:hui-element'
    card_type: conditional
    conditions:
      - entity: media_player.lounge_av_rx
        state_not: 'off'
    card:
      type: entities
      class: inline-card  ### < --- into here
      style: |            ### < --- this
        .card-content {
          padding-top: 0px;
          padding-right: 12px;
          padding-bottom: 8px;
          padding-left: 0px;
        }
      entities:
        - entity: input_select.lounge_surround_mode

How do I get the .card-content style above into the existing class:

  card-mod-theme: night
  card-mod-card: |
    ha-card.inline-card {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }
35

Try

ha-card.inline-card > div#states.card-content {
insert attrs here
}
36

But the border, bacground and box-shadow are not part of that div.

37

What do you want to target? What styles do you want to apply to that element?

38

All of them. I want to add the padding style to the existing inline class.

39 
ha-card.inline-card > * {
padding: 0 !important;
margin: 0 !important;
}

Maybe?

40

I don’t think you are following what I’m on about.

I have this existing card-mod 2.0 class in my theme:

  card-mod-theme: night
  card-mod-card: |
    ha-card.inline-card {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

I would like to add to it this style to the existing class above (keeping what is already there):

      style: |
        .card-content {
          padding-top: 0px;
          padding-right: 12px;
          padding-bottom: 8px;
          padding-left: 0px;
        }
41

Sorry, I don’t really understand what that means. Do you want to add the bottom one to the top, or the top one to the bottom?

42

Add the style (bottom) to the class (top).

43 
  card-mod-theme: night
  card-mod-card: |
    ha-card.inline-card {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }
    ha-card.inline-card > .card-content {
      padding-top: 0px;
      padding-right: 12px;
      padding-bottom: 8px;
      padding-left: 0px;
    }
1 Like