Global Mod - Add custom styles to any frontend Home Assistant element

alex3305 · June 27, 2024, 1:26pm

Inspired by @thomasloven’s great 🔹 Card-mod - Add css styles to any lovelace card, I’ve also created some sort of plugin called Global Mod where you can add CSS styles to any component within Home Assistant.

This is not a component that should replace card-mod in any way or form, but rather compliment it. With card-mod you can customize individual cards, while with global mod you can mod elements outside of those cards. Styling is done through theme files. So with an additional default-global.mod.yaml theme file:

default-global-mod:
  yellowDrawer-path: '/'
  yellowDrawer-selector: 'home-assistant-main$ha-drawer'
  yellowDrawer-style: |
    ha-sidebar { 
      background-color: yellow; 
    }
  
  livingroom-path: 'livingroom'
  livingroom-selector: 'home-assistant-main$partial-panel-resolver ha-panel-lovelace$hui-root$div'
  livingroom-style: |
    .header { 
      --app-header-background-color: red; 
    }

you can do this:
Crazy Colors

Where the mod is applied based on your URL location. And with some clever styling you can even remove the action items and add an image as your dashboard title, like so:

default-global-mod:
  rituals-path: rituals-perfume-genie
  rituals-selector: home-assistant-main$partial-panel-resolver ha-panel-lovelace$hui-root$
  rituals-style: |
    .header { 
      --app-header-text-color: #fff; 
      box-shadow: var(--material-shadow-elevation-16dp);
    }
    @media all and (max-width: 767px) {
      .toolbar .action-items { display:none!important; }
      .main-title { --margin-title: 2px 24px 0 12px; }
    }

    .main-title {
      background-image: url(https://brands.home-assistant.io/rituals_perfume_genie/logo.png);
      background-position: top left;
      background-size: contain;
      background-repeat: no-repeat;
      color: transparent;
      filter: invert(100%);
    }
  rituals-style-dark: |
    .header { --app-header-background-color: #1a1919; }
  rituals-style-light: |
    .header { --app-header-background-color: #242222; }

Rituals Dashboard

even supporting both light and dark modes out of the box . I have even more examples in the repository readme.

Installation can be done through a custom repository from HACS or of course manually. DOM navigation is done the same way as card-mod, where $ substitutes shadow DOM. Also reload themes and refresh your browser for changes to have effect.

This is still very much alpha software and things could break with release. I’m just happy to share now I have been running it myself for over a month now without any obvious drawbacks.

alexandrechoske · July 6, 2024, 1:43am

This is very cool!

is there a way we can change the page icons for prettier ones?

Tkss

sebbaT · July 6, 2024, 12:10pm

awesome! nice work

stefan1982 · August 11, 2024, 7:46am

Nou, does this add CSS to any element at the elements itself? So could this be used to overwrite hard coded CSS styles? For example, the hardcoded “Roboto” font in the config/entities data-tables? Or, for example the hardcoded “Roboto”-font in the notifications-drawer?

Seems very interesting though…

alex3305 · August 11, 2024, 10:47am

Great question. Yes it does. Just like card-mod.

So could this be used to overwrite hard coded CSS styles? For example, the hardcoded “Roboto” font in the config/entities data-tables? Or, for example the hardcoded “Roboto”-font in the notifications-drawer?

Yes it can.

default-global-mod:
  dataTableFont-path: config/devices/dashboard
  dataTableFont-selector: home-assistant-main$ha-drawer partial-panel-resolver ha-panel-config ha-config-devices ha-config-devices-dashboard$hass-tabs-subpage-data-table$hass-tabs-subpage ha-data-table$
  dataTableFont-style: 'div { font-family: Consolas, monospace!important; }'

default-global-mod:
  notificationDrawerFont-path: '/'
  notificationDrawerFont-selector: notification-drawer$ha-drawer$aside
  notificationDrawerFont-style: '.mdc-drawer__content { font-family: Consolas, monospace!important; }'

It can be a bit tricky to figure out the exact path (CSS selector), but in theory you can mod everything (globally, hence the name) in the frontend.

stefan1982 · August 11, 2024, 7:48pm

I tried your proposal.

I copied the global-mod.js to local/, checked the configuration, reloaded the YAML configuration, refreshed the theme-cache and restarted HA.

I added the following code to the end of my bronx.yaml-theme file:

  bronx-global-mod: |
    dataTableFont-path: config/devices/dashboard
    dataTableFont-selector: home-assistant-main$ha-drawer partial-panel-resolver ha-panel-config ha-config-devices ha-config-devices-dashboard$hass-tabs-subpage-data-table$hass-tabs-subpage ha-data-table$
    dataTableFont-style: 'div { font-family: Consolas, monospace!important; }'
    
    notificationDrawerFont-path: '/'
    notificationDrawerFont-selector: 'notification-drawer$ha-drawer$aside'
    notificationDrawerFont-style: ' .mdc-drawer__content { font-family: Consolas, monospace!important; }

Then again checked config/reloaded all YAML, restarted and force reloaded the browser cache, although I could not seem to get this working.

Am I doing something wrong here, or did I misunderstood your readme on how to use globe-mod?

alex3305 · August 11, 2024, 8:08pm

Thank you

I think a little bit but not to worry!

If your theme is bronx and is located in bronx.yaml in the themes directory you should create a new file called bronx-global-mod.yaml*. That file should contain the following:

bronx-global-mod:
  dataTableFont-path: config/devices/dashboard
  dataTableFont-selector: home-assistant-main$ha-drawer partial-panel-resolver ha-panel-config ha-config-devices ha-config-devices-dashboard$hass-tabs-subpage-data-table$hass-tabs-subpage ha-data-table$
  dataTableFont-style: 'div { font-family: Consolas, monospace!important; }'
    
  notificationDrawerFont-path: '/'
  notificationDrawerFont-selector: 'notification-drawer$ha-drawer$aside'
  notificationDrawerFont-style: ' .mdc-drawer__content { font-family: Consolas, monospace!important; }

So mind the missing pipe and the indentation. After that you should reload your themes and refresh your browser to get it working.

You can check whether the theme is loaded by going to your Profile page and see if the bronx-global-mod theme is there. In my case there is the default-global-mod theme:

The easiest way to get started (or test whether global mod is actually loaded) is to add the Basic Example from my GitHub repository as default-global-mod.yaml in your themes directory and select the default theme. If you reload themes and refresh your browser you should have a yellow sidebar.

* Sidenote, you can probably also append a new YAML document to the end of bronx.yaml, but let’s tackle this one step at a time.

stefan1982 · August 11, 2024, 11:16pm

Thank you for your reply. I misunderstood the readme, or didn’t grasp the idea.

Now things work, when I select the bronx-gloabl-mod theme in the profile page. Although, how should I copy all the normal overridden CSS selectors from my bronx.yaml theme-file and combine them together with the bronx-global-mod.yaml file?

TM-8 · September 15, 2024, 12:01pm

Hello, can we also use this to change the column width on all device pages.
I would like to change the column width so that not all characters are always cut off, see screenshot.

Before:

After:

Path example: /config/devices/device/

Absolute path to the element: home-assistant-main//ha-drawer/partial-panel-resolver/ha-panel-config/ha-config-devices/ha-config-device-page//hass-subpage/div

Screenshot developer tools:

I have inserted the following code into my theme, but without success:

default-global-mod:
  # home-assistant-main//ha-drawer/partial-panel-resolver/ha-panel-config/ha-config-devices/ha-config-device-page//hass-subpage/div
  deviceColumns-path: 'config/devices/device/'
  deviceColumns-selector: 'home-assistant-main$partial-panel-resolver ha-panel-config$ha-config-devices$ha-config-device-page$hass-subpage$div'
  deviceColumns-style: |
    .container { 
      max-width: 90% !important;
    }

Can someone give me a TIP.

Thank you.

alex3305 · September 15, 2024, 3:17pm

Of course. You were on the right path. Almost there even .

First up the solution:

default-global-mod:
  # home-assistant-main//ha-drawer/partial-panel-resolver/ha-panel-config/ha-config-devices/ha-config-device-page//hass-subpage/div
  deviceColumns-path: 'config/devices/device/'
  deviceColumns-selector: 'home-assistant-main$partial-panel-resolver ha-panel-config ha-config-devices ha-config-device-page$hass-subpage'
  deviceColumns-style: |
    .container { 
      max-width: 90% !important;
    }

Two things that we’re not quite right:

You tried to traverse to a shadow root between ha-panel-config and ha-config-devices, and between ha-config-devices and ha-config-device-page, but those were just regular descendants. Therefore those should only be separated by a space instead of a dollar sign.
The selector went one level too deep. The final $div isn’t necessary. Otherwise the custom mod style is created within the div.container. But styles are scoped within elements. So it should be scoped on the same level as the div.

Final result

Developer tools

Same level

TM-8 · September 15, 2024, 10:39pm

Thank you very much. Thanks to your help, I’ve now got it working in the Metro theme. It would actually be very useful if you could set the column width in HA. In most languages the names are longer than in English. As far as I have seen, the HA team has had a corresponding suggestion for improvement since 2022.

Thank you and keep up the good work. TOP!!!

Thomas

TM-8 · October 13, 2024, 8:00pm

Does it still work for you? Not for me since HA update 2024.10.2

I also tested the default-global-mod.yaml, but it no longer works either.

Bildschirmfoto 2024-10-13 um 21.59.01

Thank you very much.

alex3305 · October 14, 2024, 8:28am

Hi Thomas,

Thanks for reporting this. It seems it was (partially) an issue on my end . I thought I had the hacs.json configuration file properly configured to search the dist directory in the repository, but HACS preferred the root global-mod.js. But that’s the source file and not the distributed file and thus won’t work.

I have just released 0.2.1 where I moved the dist to the root and the source to a new src directory which will resolve the issue.

Maybe a little TMI for you, but just want to be transparent what was going on .

gfandrea · October 14, 2024, 10:30am

Hi,
I am trying to set a different color for my rooms headers, like your examples.

the path is “lovelace-casa/studio”
“personalizzato” is the name of my theme

I have created a new file in the theme folder whit the name personalizzato-global-mod.yaml with this code

personalizzato-global-mod:
  studio-path: "lovelace-casa/studio"
  studio-selector: "home-assistant-main$partial-panel-resolver ha-panel-lovelace$hui-root$div"
  studio-style: |
    .header { 
      --app-header-background-color: "#fab387"; 
      --app-header-text-color: "#1e1e2e";
    }

I can see the new theme in setting

Is this correct?
Thank you

alex3305 · October 14, 2024, 10:55am

Yes. This should be correct.

gfandrea · October 14, 2024, 11:36am

I hoped something was wrong, because is not working

alex3305 · October 14, 2024, 12:08pm

Please update to the latest version (0.2.1) to see if that fixes it. Otherwise I recommend you try it with the default theme first. And please report if there any errors within the DevTools Console F12.

gfandrea · October 14, 2024, 12:38pm

I had the latest version, tryed with the default one and worked.
I found the problem, it wasn’t recognizing the color: I hd to vrite the color like this: #fab387 and not like this: “#fab387”. without "

alex3305 · October 14, 2024, 1:33pm

Great. Thanks for the feedback. Inside the style block it is regular CSS .

jpbaril · November 13, 2024, 8:35pm

Thanks for this! This is exactly what I was looking for, except maybe in an easier form.
So, sorry to bother with asking about my own specific case.

I’m trying to make bigger the titles of the new dashboard sections. But it’s not working.

  biggerTitles-path: '/'
  biggerTitles-selector: 'home-assistant-main $ partial-panel-resolver ha-panel-lovelace $ hui-root $ div hui-view-container $ hui-view hui-sections-view $ ha-sortable div'
  biggerTitles-style: |
    div.section div.container div.content.title p {
      font-size: 1.5em;
    }

Thanks

BTW, as someone that was not using themes nor had any idea about themes, I think it could be good to specify that user should create a directory named “themes” in base default home assistant directory if it is not already there. Took me a while to figure out.