Soft UI light theme

This is an old theme. Some stuff might be broken.

Use the lovelace-soft-theme instead.

Home Assistant light theme, built on from @JuanMTech, using style boilerplates from @thomasloven and @N-L1.
This theme depends on card-mod for the soft-ui styling.
Looking for the dark theme instead?
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.

Screenshot

Custom dashboard made with soft ui

Notes

• You can use your own colors by just copy/pasting the card-mod part.
• This will clamp your columns to 1 column wide. More info.
• These things are supported.
• This theme was based off of the Google Light Theme.

Fonts

Some fonts that you should probably download and install that I think match Soft UI, or just load as a CSS resource:

• Quicksand: Google Fonts page, download, Google Fonts css.
• Cascadia Code PL: download (click on the top asset, download, unzip, find CascadiaCodePL.woff2).

Tutorial on how to load any font into your browser

Upload the woff2 into /config/www, and then make a file called /config/www/fonts.js which contains this:

function loadcss() {
    let css = '/local/fonts.css?v=0.001';
    
    let link = document.createElement('link');
    let head = document.getElementsByTagName('head')[0];
    let tmp;
    link.rel = 'stylesheet';
    link.type = 'text/css';

    tmp = link.cloneNode(true);
    tmp.href = css;
    head.appendChild(tmp);
    console.info('%c Loaded font CSS at ' + css, 'color: white; background: #000; font-weight: 700;');
}
loadcss();

Then make a file called /config/www/fonts.css which contains this:

@font-face {
  font-family: 'Cascadia Code PL';
  font-style: normal;
  font-weight: 400;
  src: url(/local/CascadiaCodePL.woff2) format('woff2');
}

(For each font, create the same thing in the file, but changing the source and name of font.)
Then finally add /local/fonts.js to your list of lovelace resources. (Maybe?) Restart Home Assistant. Press Ctrl+Shift+R. Done!
Credit to https://community.home-assistant.io/t/use-ttf-in-lovelace/143495.