[FR]: Add support to style settings

[pizzapi2012]

Can you add support to style settings, I cannot find a way to do that.

[dcapslock]

This is already possible with themes. The relevant theme key is uix-config(-yaml) with any further elements like cards also using theme to style. Depending on what you want to style you may need to look at uix-top-app-bar-fixed.

I will move this to Q&A discussion to continue. Let me know what you wish to achieve and I can provide further tips.

[pizzapi2012]

how can i do that that specifically

[dcapslock]

What are you seeking to style? Let me know and I can start you there.

[pizzapi2012]

Settings background image and color.

[dcapslock]

You can start here which works for settings overview dashboard. There is a general pattern in that you need to work out what in each config panel may need adjusting as far as background to make the image show, and then where to put the background.

UIX Test:
  uix-theme: UIX Test
  uix-config-yaml: |
    .: |
      :host {
        --card-background-color: rgba(255,255,255,0.6);
      }
    "* $": |
      ha-top-app-bar-fixed {
        background: url(http://www.w3.org/2008/site/images/logo-w3c-screen-lg);
      }

[dcapslock]

Adding hass-subpage and hass-tabs-subpage gets a few more panels. Just working on those with data tables. You may need to play with primary-text-color in places, or put in a background with opacity on some elements.

UIX Test:
  uix-theme: UIX Test
  uix-config-yaml: |
    .: |
      :host {
        --card-background-color: rgba(255,255,255,0.6);
        --primary-background-color: rgba(255,255,255,0.6);
      }
    "* $": |
      ha-top-app-bar-fixed,
      hass-subpage,
      hass-tabs-subpage {
        background: url(http://www.w3.org/2008/site/images/logo-w3c-screen-lg);
      }

[dcapslock]

Now updated to include sub pages which include a data table, which I think covers most. There would still be some adjusting to your preference on how you wish heading text etc to look. i.e. make it stand out or give it a background. I think you should be able to take from here. If you come up with a good theme for settings, then please share and I will write into a uix-guide with credit to yourself.

UIX Test:
  uix-theme: UIX Test
  uix-config-yaml: |
    .: |
      :host {
        --card-background-color: rgba(255,255,255,0.6);
        --primary-background-color: rgba(255,255,255,0.6);
        --sidebar-background-color: rgba(255,255,255,0.7);
      }
    "* $":
      .: |
        ha-top-app-bar-fixed,
        hass-subpage,
        hass-tabs-subpage,
        hass-tabs-subpage-data-table {
          background-image: url(http://www.w3.org/2008/site/images/logo-w3c-screen-lg);
        }
      hass-tabs-subpage-data-table $ ha-data-table $: |
        .mdc-data-table {
          --data-table-background-color: rgba(255,255,255,0.6);
        }

[dcapslock]

Note, --sidebar-background-color covers what the header/footer color will be.

[pizzapi2012]

how would I add the global styles to ha? via themes, etc.

[dcapslock]

Yes, this needs to be applied to a theme. If you mean how to define global vars that the code I provided may use, just defined them in your theme, like any other theme var, then you can use. e.g. define with my-theme-var: blue - use with var(--my-theme-var);

[pizzapi2012]

image 1

image 2

I have visions theme, I want the sidebar in image 2 to be like image 1, that is why I want a background image for settings.