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

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 :smile: . 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.

2 Likes

This is very cool!

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

Tkss

awesome! nice work

1 Like

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…

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; }'

image

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.

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?

Thank you :heart:

I think a little bit :slight_smile: 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:

image

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.

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?

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.

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

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:

  1. 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.
  2. 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
image

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

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.

1 Like

Hi Thomas,

Thanks for reporting this. It seems it was (partially) an issue on my end :person_shrugging: . 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 :stuck_out_tongue_winking_eye: 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.

image

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

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

Yes. This should be correct.

I hoped something was wrong, because is not working :slight_smile:

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.

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 "

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