Awesome Open Source
Awesome Open Source

Soft UI light theme

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

Use the lovelace-soft-theme instead.
hacs_badge
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

Screenshot of it Custom dashboard made with soft ui

Notes

Fonts

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

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.



Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Python (805,485
Theme (43,519
Home Assistant (3,709
Skin (3,481
Hacktoberfest2020 (1,928
Hacs (517
Light Theme (482
Theme Ui (103
Soft Ui (24