So, I made some Soft UI themes

Hey guys. I’ve been using Soft UI for a while now. I used custom themes, namely the Google Light Theme and the Dark Purple Theme by JuanMTech. I changed some stuff here and there, and only kept the changes inside my Home Assistant instance.
But now that card-mod themes are out, I’ve added a lot more to them, and made them public. Here’s their links:

This theme is pretty powerful. It can:

  • Apply soft-ui to an auto-generated dashboard, and keep it auto-generated.
  • Help you to only use the necessary style in your handmade dashboard, and keep it simple.
  • Work in most places over HA, not just Lovelace.
  • Apply a compact header to Lovelace, without installing an addon.

(thanks card-mod!)

They’re available as default HACS repos. Feel free to take anything from them if you want!

Update on 10/10/2020:
Okay, so I’ve added some stuff to the card-mod wiki, use it if you want in your own theme.


Just wanted to charm in and say how awesome this is! I finally got a chance to try it and I’m blown away. Great work! :smiley:

1 Like

Can this be easily explained or pointed to in the code? I would love to drop another custom element from my setup.

I spent a couple hours working on it, but you’re free to copy/paste for your card mod theme!
Here’s the latest:

Old link:


Thanks for the work you’ve done in this, they’re very pretty.

When I apply the theme is centres all my cards into 1 column whereas all other themes allow for 3 columns (or whatever the width of the screen allows)

Is there a way to this “1 column” setting off?

I do this because it shows it this way in the screenshots:

Edit out the part here:

(old theme link):

I’ve added multiple colors. Let me know what you think.

Appreciate all your time and effort here (and in the CardMod/Custom Header threads).
Is there a way to manually install this theme? I don’t use HACS for my themes and simply manually edit my frontend yaml file. Of course it generate errors because it seems like I need to use the other files included in your repo. If this is possible, please provide steps and locations where files should be installed. Thanks.

Edit: Nevermind…just realized the actual them was in the “Themes” folder. I was using the themes.yaml in the root. :crazy_face: Got it working now.

Is there a new way to remove the forced single column? Previously, I was removing a section of the CSS from the theme, but I can’t seem to find it now.

4 posts up. I just did as prescribed there and it worked perfectly for me.

1 Like

Thank you!

Hey @KTibow, I’m runnning a reasonably modified version of your theme from 0.38 I think?

Having just updated to 0.117.5 from 0.115 i’ve lost my header.

Is there a specific section of code that deals with this to get it back?

I had a quick go at modifying the current version but there have been sooooo many changes that not much aligns anymore. which is otherwise a great effort :slight_smile: i’m just a little stuck here :stuck_out_tongue:



Okay, so:
Go to
Then copy your current theme code:
Then run the diff. If you can send your theme code, I can help you with it.

1 Like

wow I had no idea about diffchecker. so much easier than in sublimetext

Can you swap the sides? It’ll make it easier.

I think that should do it. there was a swap button.

@KTibow looks like I got it back by adding the section of the updated theme :smiley:

Partially Fixed the other more into screen issue too. Just have to slowly realign and update my theme with the current.

Cheers :slight_smile:

  # Header
  header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there.
  card-mod-root-yaml: |
    paper-tabs$: |
      /* Uncomment this for header on the bottom. You're 2/3 there.
      #selectionBar {
        bottom: unset !important;
    .: |
      /* This moves the header up. */
      app-header {
        transform: translate3d(0px, -48px, 0px);
      /* Let's change the background. */
      app-header, app-toolbar {
        background: var(--primary-background-color) !important;
        color: var(--primary-text-color) !important;
      /* We're still going to need a way to see that we're in edit mode. */
      app-header.edit-mode {
        padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
        border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
      /* This changes the color of the currently selected tab. */
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--primary-color) !important;
      paper-tab[aria-selected=true] {
        color: var(--primary-color) !important;
      /* This hides the help button. */[target="_blank"] {
        display: none;
      /* This makes the plus color the same as the background. */
      #add-view {
        color: var(--primary-background-color);
      /* This hides the title. */
      [main-title] {
        display: none;
      /* This hides the app-toolbar in edit mode. */
      app-toolbar.edit-mode {
        height: 0;
      /* This moves the edit mode buttons back in. */
      app-toolbar.edit-mode > mwc-icon-button {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      app-toolbar.edit-mode > ha-button-menu {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
      /* This adds a bit more padding, mainly for unused entities. */
      app-header.edit-mode > div {
        padding-left: 5px;
      /* Uncomment this for header on the bottom. You're 3/3 there.
      app-header {
        top: calc(100vh - 60px) !important;
        bottom: 0 !important;
        transform: unset !important;

I’m only getting one row in lovelace for some reason?

(My screen is larger than this obviously :smile:)

Intended as in the screenshots:
Look in the form thread earlier for how to disable it. Hope this helps! :smiley:

Great, thanks a ton for the quick response!