What has changed in 2026.4.x regarding card_mod?

Spartacus · April 9, 2026, 7:19pm

Hi,

I used this code to make the background of the input datetime transparent.
–mdc-text-field-fill-color: transparent;
–mdc-select-fill-color: transparent;

Since the update to 2026.4.1 it will not work anymore.

The complete code:

type: entities
entities:
  - entity: input_datetime.on_time_xmas_out_timer1
    name: "Einschaltzeit:"
  - entity: input_datetime.off_time_xmas_out_timer1
    name: "Ausschaltzeit:"
show_header_toggle: false
title: "TIMER 1:"
card_mod:
  style:
    ha-time-input:
      $ ha-base-time-input $:
        ha-textfield:
          $: |
            .mdc-text-field {
              height: 40px !important;
            }
            .mdc-line-ripple::after,
            .mdc-line-ripple::before {
              border-bottom-style: none !important;
            }
            .mdc-text-field__ripple {
              display: none !important;
            }
        ha-select $: |
          .mdc-select__anchor {
            height: 40px !important;
          }
          .mdc-line-ripple::after,
          .mdc-line-ripple::before {
            border-bottom-style: none !important;
          }
          .mdc-select__ripple {
            display: none !important;
          }
      .: |
        ha-time-input {
          height: 38px;
          border: 1px solid transparent;
          border-radius: 4px !important;
        }
        ha-time-input:hover {
          border: 1px solid rgba(127,127,127,0.5);
        }
    .: |
      :host
       {
        {% if 
          is_state('input_boolean.auto_xmas_light_out_timer_1','off') %}
          --mdc-text-field-ink-color: var(--disabled-text-color);
          color: var(--disabled-text-color);
          --mdc-text-field-idle-line-color: var(--disabled-text-color);
          --mdc-select-ink-color: var(--disabled-text-color);
          --mdc-select-idle-line-color: var(--disabled-text-color);
          --mdc-select-dropdown-icon-color: var(--disabled-text-color);
          --paper-item-icon-color: var(--disabled-text-color);
          --ha-card-header-color: #7E7E7E;
          pointer-events: none;              
        {%else%}
          --ha-card-header-color: #00CC00;      
        {% endif %}
        --mdc-text-field-fill-color: transparent;
        --mdc-select-fill-color: transparent;
        --ha-card-header-font-size: 15px;      
       }

any ideas?

Pjarbit · April 11, 2026, 7:03pm

Not that I think this is your issue, but card-mod is been deprecated and no longer being worked on. The new integration is UIX. Search Home Assistant UIX in google. Its a drop in reverse compatible integration, (where card mod was not a full integration previously) Some cards wont code the same but you can still use the card mod format and everything should work.

HappyCadaver · April 11, 2026, 8:05pm

No, it hasn’t. It’s still a valid option and gets maintenance updates when obvious things break. UIX is card-mods code base moved to an integration so that additional features can be added.

FWIW I have moved on to UIX myself though I have yet to make use of new features like forge and spark, but card-mod is still a valid option and still used by many folks.

@Spartacus you are likely to get more attention on this by bringing it up in the Card Mod thread 🔹 Card-mod - Add css styles to any lovelace card. Chances are it’s the --mdc- vars as HA as material design is being depricated.

Ildar_Gabdullin · April 11, 2026, 9:43pm

This is a wrong statement originated from another wrong statement “UIX is a replacement for card-mod”.
Only the author of card-mod - Thomas - can issue this statement, and he has not.
“Alternative” - a valid word.

dcapslock · April 13, 2026, 7:15am

In case any one needs… the best words to use about UIX are those from its home page.

With an ever growing number of features that go beyond cards and dashboards, UI eXtension (UIX) was created to keep pushing the boundaries of custom CSS across your Home Assistant UI. UIX comes from the heritage of card-mod by @thomasloven

UI eXtension consists of UIX Styling and UIX Forge. UIX Styling allows for applying CSS styles to (nearly) any Home Assistant Frontend element. UIX Forge provides a way to forge Home Assistant elements (cards, badges, rows etc.) allowing for templates for all of the element’s configuration, as well as additional advanced augmentation of the element through UIX Forge Sparks.

Ildar_Gabdullin · April 13, 2026, 10:45am

The statement “UIX is a replacement for card-mod” was written on the very 1st page of your UIX site. If you already edited it - good for you)))
As I already said once - creating UIX is a great thing, but it should have been done in a very beginning instead if hijacking card-mod of Thomas since i do not consider some of your changes as useful and improving the plugin. (not to mention amount of my nerves I wasted explaining you why you need to revert some of your breaking changes).

dcapslock · April 13, 2026, 10:58am

No, it has never been on the home page. The FAQ includes a question and answer about whether UIX is a drop in replacement for card-mod which is appropriate in the FAQ.

Please stop spreading false and disparaging statements. I never did hijack anything and for you to keep saying so is slanderous and not suitable for publication in this forum.

petro · April 13, 2026, 10:59am

There is nothing wrong with the way that @dcapslock is going about this situation. He’s crediting @thomasloven in both his posts and the github repo.

Please stop badgering him every post he makes. If you don’t like a library, don’t use it. Do not badger people about it.

Ildar_Gabdullin · April 13, 2026, 11:11am

Not badgering, just clarifying because people believe that card-mod is deprecated. And the “replacement” statement was in the page.

Managed to open the UIX site, quoting:
“ Is UI eXtension a drop in replacement for Card-mod?
Yes, UI eXtension is a drop in replacement for Card-mod versions up to 4.2.1”
As a result - posts here like “card-mod deprecated”, “this is a replacement”. Suggest to edit this particular point in FAQ to avoid confusion.

Incorrect conclusion; I did write that creating UIX is a great thing.

boheme61 · April 13, 2026, 11:28am

Who approve Pull-requests/code changes in ThomasL’s Repos ?

I had the impression that ones personal Repos, is controlled by it’s owner ( in the end ) , Not something anyone just like that, can fu ( as you describe it )

True, for me and many others, It iS
And a very easy drop-in replacement, as also explained in the docs

Ildar_Gabdullin · April 13, 2026, 11:48am

Agreed, it COULD be a replacement for many people due to many more added features; but who usually dares to publicly claim “my product is a replacement of another product”? As I said - “alternative” is a proper word.

boheme61 · April 13, 2026, 11:50am

The Sun don’t rise in the east, the world Spins around, towards the Sun( or in-fact it might be away from the Sun ), and you keep spinning around another option, when you could just move on, and keep using ThomasL’s Repos

Ildar_Gabdullin · April 13, 2026, 11:55am

This is an everyone”s choice to use whatever he wants to use. But we should not spread information leading to posts like “plugin is deprecated”

dcapslock · April 13, 2026, 11:59am

Speaking of drop in replacement in the context of the FAQ is appropriate, especially as the FAQ goes on to describes the compatibility. There is no suggestion that UIX is any official, sole or any other sort of replacement. UIX documentation does not mention the word deprecated when speaking of card_mod.

Spartacus · April 13, 2026, 2:26pm

Hi everyone,

thanks a lot for your replies. To be honest, I’m now quite unsure about what I should do next. Over the past 1.5 years, I’ve invested a huge amount of time customizing my cards with card_mod. In general, I really appreciate new developments — especially when they make it possible to create reusable building blocks that can be applied across multiple cards.

However, I’m now feeling uncertain about whether I should bite the bullet and migrate everything to UIX, without knowing whether the project will still be actively supported a year from now.

Are there any ways to convert my existing card_mod setups to UIX without having to rebuild everything from scratch?

Thanks

WarC0zes · April 13, 2026, 2:39pm

Hi,
uix is backward compatible with card mod:.

Alternatively, you can easily change card_mod: to uix: from the configuration editor.
In the configuration editor, you write card_mod: in the top box and uix: in the bottom box of the search engine (Ctrl + F) and do a replace all.

Spartacus · April 13, 2026, 3:00pm

Hi @WarC0zes,

okay, so it’s clearly not that simple. These example no longer work after replacing card_mod with UIX.”

type: markdown
content: |
  <table>
    <!-- Zeile 1: WLAN -->
    <tr>
      <td></td>
      <td>
        <i><ha-icon icon="mdi:wifi"></ha-icon></i>
      </td>
    </tr>

    <!-- Zeile 2: Auto -->
    <tr>
      <td></td>
      <td>
        <i><ha-icon icon="mdi:car-sports"></ha-icon></i>
      </td>
    </tr>
  </table>
uix:
  style:
    ha-markdown $: |
      /* Fahrbahn für Auto-Zelle */
      tr:nth-child(2) td:nth-child(2) {
        position: relative;
        overflow: hidden;
        height: 32px;
        width: 200px; /* Strecke */
      }

      /* WLAN-Icon (Zeile 1) */
      tr:nth-child(1) td:nth-child(2) i {
        display: inline-grid;
        place-items: center;
        position: relative;
        width: 24px;
        height: 24px;
        margin-top: 6px;
        border-radius: 50%;
      }
      tr:nth-child(1) td:nth-child(2) i::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        pointer-events: none;
        {% if states("binary_sensor.golf_online")=="on" %}
          animation: online 2s infinite;
        {% else %}
          animation: offline 1s infinite;
        {% endif %}
      }
      tr:nth-child(1) td:nth-child(2) i ha-icon {
        --mdc-icon-size: 16px;
        color:
        {% if states("binary_sensor.golf_online")=="on" %} #00CC00
        {% else %} #f44336
        {% endif %} !important;
      }

      /* Auto-Icon (Zeile 2) */
      tr:nth-child(2) td:nth-child(2) i {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        animation: car-drive 6s linear infinite;
      }
      tr:nth-child(2) td:nth-child(2) i ha-icon {
        --mdc-icon-size: 24px;
        color: #00CC00 !important;
        animation: car-wobble 0.6s ease-in-out infinite alternate;
      }

      /* Keyframes WLAN */
      @keyframes online {
        0%   { box-shadow: 0 0 4px 2px #00CC00; }
        100% { box-shadow: 0 0 10px 12px transparent; }
      }
      @keyframes offline {
        0%   { box-shadow: 0 0 4px 2px #ff0000; }
        100% { box-shadow: 0 0 4px 2px transparent; }
      }

      /* Keyframes Auto */
      @keyframes car-drive {
        0%   { transform: translate(0, -50%); opacity: 0; }
        10%  { transform: translate(10px, -50%); opacity: 1; }
        90%  { transform: translate(160px, -50%); opacity: 1; }
        100% { transform: translate(160px, -50%); opacity: 0; }
      }
      @keyframes car-wobble {
        0%   { transform: rotate(-8deg); }
        100% { transform: rotate(8deg); }
      }

WarC0zes · April 13, 2026, 3:14pm

What’s not working?

Your code gives me this result.
popup2

Spartacus · April 13, 2026, 3:27pm

it looks like this

card_mod has been removed and if I replaye card_mod with uix: then it looks like what you can see in the screenshot.

if I replace uix: with card_mod: then it looks ok.

is there anything else to configure?

WarC0zes · April 13, 2026, 3:50pm

You need to remove card_mod from HACS and install uix. Then restart HA.
Just in case, clear your browser cache.
Otherwise, there’s nothing to configure.