Theme Cheatsheet?

Jonnvoll · September 22, 2017, 11:03am

I would like to make my own theme. But I’m not sure of all the variables and which one corresponds to which item in the UI. Is there a cheatsheet for all the variables that can be used to make a theme?

forsquirel · September 22, 2017, 5:22pm

github.com

home-assistant/frontend/blob/master/src/resources/ha-style.ts

import "@polymer/paper-styles/paper-styles";
import "@polymer/polymer/lib/elements/custom-style";
import { derivedStyles } from "./styles";

const documentContainer = document.createElement("template");
documentContainer.setAttribute("style", "display: none;");

documentContainer.innerHTML = `<custom-style>
  <style>
    /*
      Home Assistant default styles.

      In Polymer 2.0, default styles should to be set on the html selector.
      (Setting all default styles only on body breaks shadyCSS polyfill.)
      See: https://github.com/home-assistant/home-assistant-polymer/pull/901
    */
    html {
      font-size: 14px;
      height: 100vh;

This file has been truncated. show original

edit: Link changed

Jonnvoll · September 22, 2017, 10:03pm

Thanks