search

KTibow / lovelace-light-soft-ui-theme

🎨 Home Assistant soft UI light theme, with help from @JuanMTech, @thomasloven, and @N-L1.
MIT License
59 stars 6 forks source link
hacktoberfest hacktoberfest2020 hacs home-assistant homeassistant light-theme skin soft-ui theme theme-ui themes

readme

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:

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: ```js 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: ```css @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.