GitXplorerGitXplorer
K

lovelace-dark-soft-ui-theme

public
45 stars
6 forks
0 issues

Commits

List of commits on branch main.
Unverified
441f71b99f99780eaab81824a81806f5f449e8fa

FIx card-mod for new syntax

KKTibow committed 4 years ago
Unverified
d4e8af11fd4a5787caed03774b998bafdc854637

Fix header

KKTibow committed 4 years ago
Unverified
7d8486f0d72ded4be0bae42589dddacbbb5aa926

Improve header

KKTibow committed 4 years ago
Unverified
3b4d72c169ff56e47fc5920d67ef56964ad6deac

Make add button on bottom visible

KKTibow committed 4 years ago
Unverified
8564be7924af1f65b1517ac100cec50ff23754ae

Fix bottom header

KKTibow committed 4 years ago
Unverified
ab2f1f38618bd8cc2718f78922f3b59212b89894

Improve shadow for other theme users

KKTibow committed 4 years ago

README

The README file for this repository.

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.