Allow styling Home Assistant interface itself (not lovelace)

Feature Requests
1

We can style our lovelace dashboards, but can’t style home assistant itself. I would love to be able to apply some basic CSS styling to home assistant – there are some aspects of the UI the persistently annoy me but probably not enough to get them accepted as feature requests. I tried a chrome extension like Stylus, but it doesn’t allow styling the shadow dom at all.

Examples of things I would change:

  • reduce margins and padding in automation editor to make the view much more compact
  • expand the width of some popups when I am on a wide screen

I realize they’d be subject to break if Home Assistant changes things, but offering a simple way to inject our own custom css would be nice.

2

Only in some limited extent:

  1. You can style SOME lovelace cards in some extent - like “set a color for an icon in Tile card”.
  2. You can set own values for CSS variables in a custom theme. And only SOME variables are officially supported. You may still re-define some “–heading-some-color” variable and it may work NOW, but it may stop working some day w/o a warning. And custom themes are applied both for lovelace & other places of UI.

Based on this, I would say that currently a styling of “not lovelace” parts is more-or-less same as styling of “lovelace” parts.

P.S. Of course we are not talking about card-mod here since this is a custom plugin.

3

Maybe I’m misunderstanding, but themes allow a lot of customization of lovelace dashboards. As far as I’m aware, there’s no way to apply that (or any) level of customization to the rest of Home Assistant.

4

Themes allow to define CSS vars which are also used in non-lovelace part of UI.
Simple test: set “primary-text-color” to red.

5

But there isn’t a way to do anything like this:

  • reduce margins and padding in automation editor to make the view much more compact
  • expand the width of some popups when I am on a wide screen
  • customize how the entities list view (/config/entities) looks

Right?

6

Such customization is probably considered as not needed for a majority of users. Others can try using external js (officially supported).