Skip to content
This repository has been archived by the owner on Jun 14, 2022. It is now read-only.

🎨 Home Assistant soft UI dark theme, with help from @JuanMTech, @thomasloven, and @N-l1.

License

Notifications You must be signed in to change notification settings

KTibow/lovelace-dark-soft-ui-theme

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Soft UI dark theme

This is an old theme.

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