Skip to content

Custom Themes

This section covers creating custom themes in the config.

Start by adding an array called custom under the theme object in the config or use the template.

  "theme": {
    "custom": [
        "name": "My Theme",
        "base": "dark",
        "overrides": {

        }
    ]
  }

name

The name of your theme

base

The theme to use as this theme's base. Start with either light or dark and expand from there

overrides

This is where you edit the theme. Here is a table of all parts of the theme that can be overridden/configured. Replace the dots (.) with an object. ("backgrounds": { ... })

Item What this configures/overrides
type The top level base. This is the high level theme which can only be light or dark. Generally this isn't required when using the light or dark theme as the base
primary The primary color that the UI uses. This is used for sliders, dropdowns, etc.
secondary The secondary color that the UI uses.
backgrounds.main The main background. This can be a color or a picture. You must use css formatting however, so to use an image, use url(https://myimageaddress...)
backgrounds.default The default background that is not defined in this section
backgrounds.navigation The background that the bottom navigation uses
backgrounds.card.on The color of the card when on. i.e. the light or switch is turned on.
backgrounds.card.off The color of the card when switched off or not able to switch on
backgrounds.card.disabled The color of the card when the entity is unavailable.
backgrounds.card.alarm.home The color of an alarm card and it is armed home.
backgrounds.card.alarm.away The color of an alarm card and it is armed away.
backgrounds.card.alarm.triggered The color of an alarm card and the alarm has been triggered.
text.light The color of the lighter text areas
text.main The color of the main text areas
text.icon The color of the icons. This is for the icons on the cards, if added.

Colors

To set the color you can use any color using the hex value, Material colors or even images for backgrounds.

Material Color

To use Material colors, you can use the Material Design Pallette to find the color you want, then using them like so:

            "main": "blueGrey[500]",

See how Blue Grey becomes camel-cased as blueGrey. The [500] is the exact color. This would result in #607D8B.

Hexadecimal color

You can use hexadecimal values to set colors using the usual #RRGGBB format.

Image

For backgrounds, you can set an image for the background if you like. The only caveat to this is that you have to use css formatting.

To add an image set it as a url like so:

"main": "url(https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg)",

Make sure to put the url in brackets like the above.

Example Themes

Here are some example themes you can use or expand on. Contributions are welcome!

Midnight

      {
        "name": "Midnight",
        "base": "dark",
        "overrides": {
          "primary": "pink",
          "backgrounds": {
            "main": "#383c45",
            "default": "#383c45",
            "card": {
              "on": "pink[600]",
              "off": "#434954",
              "disabled": "#7f848e",
              "alarm": {
                "home": "pink[600]",
                "away": "pink[600]"
              }
            }
          },
          "text": {
            "light": "grey[50]",
            "main": "grey[100]"
          }
        }
      }

Midnight Theme

Forest

      {
        "name": "Forest",
        "base": "light",
        "overrides": {
          "backgrounds": {
            "main": "url(https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg)",
            "card": {
              "on": "lightGreen[700]",
              "off": "green[50]",
              "alarm": {
                "home": "lightGreen[700]",
                "away": "lightGreen[700]"
              }
            }
          }
        }
      }

Forest Theme