Home Home Assistant

How to set up themes in Home Assistant

By
Juan
-

The Home Assistant community is always sharing some great things for Home Assistant. Today I want to do my part and show you guys how to set up themes in Home Assistant. How to set them up to automatically switch between a light and a dark theme when it’s night time, and last but not least, I’m going to share with you 20 themes that I have made for Home Assistant.

 

Step 1- Create a themes.yaml file

The first thing that you need to do is create a new file where you’re going to store all the themes, and you need to save that file in the Home Assistant Config folder. You can set up the Samba add-on to have access to the config folder and use any text editor like Atom or Notepad++ to create and edit the Yaml files. You can also use the Configurator add-on and manage the files directly from Home Assistant.

Home Assistant – Beginner’s guide Based on HassOS

All right so open your text editor and enter the themes that you would like to use. Then, you need to save the file inside the Home Assistant Config folder, so go into Network, Hass.io, Config and name the file themes.yaml.

When finished, open the configuration.yaml file, look for the frontend component and below, type themes: !include themes.yaml. 

frontend:
  themes: !include themes.yaml

 

With this, it’s going to read the new file and would give you the option to select the new themes in Home Assistant. Save the file and then restart Home Assistant.

After Home Assistant is back online, go to Configuration, General, scroll down, and you should now have a new dropdown where we can select any of the new themes.

 

Step 2- Set up an automation to enable a specific theme

The next thing that you need to do is create an automation that would set up a specific theme every time you open or sign in to Home Assistant from any device. To do that, open the automations.yaml file and enter the following:

- alias: 'Set theme at startup'
  trigger:
    platform: homeassistant
    event: start
  action:
    service: frontend.set_theme
    data:
      name: Dark & Green (Theme Name)

 

To explain a little bit, under alias, we’re setting up the name for the automation, under trigger, we’re using the homeassistant platform, and we’re setting the event to start. This means that the automation would trigger at the start of Home Assistant. Under action, we’re using the service, frontend.set_theme. This is the command that is going to set up the specific theme. And last, under data, we’re entering the name for the theme that we want to be enabled.

Save the file and then restart Home Assistant to apply the changes. Now, every time you restart or open Home Assistant from any device, you would get the same theme that you set up in the automation.

 

Step 3 – Automatically switch between a light and a dark theme

What if you want a dark theme to be enabled at night time and then another theme during the daytime? Well, you can do that using the sun component and another automation that would use the IF statement. Let me show you how to do that.

 

First, open the configuration.yaml file and make sure that you have the sun component. By default, it should be already there but still double check. Then, go back to the automation.yaml file and replace the previous automation with the following:

- alias: 'Set HA theme for day and night'
  trigger:
    - platform: homeassistant
      event: start
    - platform: state
      entity_id: sun.sun
      to: above_horizon
    - platform: state
      entity_id: sun.sun
      to: below_horizon
  action:
    - service_template: frontend.set_theme
      data_template:
      name: >
        {% if states.sun.sun.state == "above_horizon" %}
          Light - Green
        {% else %}
          Dark - Green
        {% endif %}

Besides using the homeassistant platform, we’re also going to use the state platform twice with the entity sun.sun and we would set the first one to above_horizon and the second one to below_horizon. Under action, we’re going to use the frontend.set_theme  for the service_template, and under the data_template, we would use the if statement to specify what theme gets enabled at a specific state.

 

So pretty much this is saying that if the sun is above the horizon, it would use the light theme. Otherwise, it would use the dark theme. Lastly, save the file and restart Home Assistant to apply the changes.

Now, with this set, Home Assistant would automatically switch between a light and a dark theme every day without you having to do anything. Awesome right?

All right guys As promise, I have 20 themes for Home Assistant that I what to share with you today. You can see them in the next page. Let me know if you like them or if you have any request for a new theme. I’m always open for suggestions. Also, if you find something that is not themed well, please let me know so I can look into it and fix it if it’s possible.

 

I’m mostly active on twitter so you can send me a message there. Also, don’t forget to follow, and subscribe to my YouTube channel for more.

 

Themes for Home Assistant

  • Dark – Green

Dark - Green:
  ### Main Interface Colors ###
  primary-color: "#03B14B"
  light-primary-color: "#47FC92"
  primary-background-color: "#1F1F28"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#2F2F3D"
  ### Text ###
  primary-text-color: "#FFFFFF"
  secondary-text-color: "#47FC92"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#464653"
  ### Sidebar Menu ###
  sidebar-icon-color: "#B6B6C1"
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#47FC92"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#04E762"
  state-icon-active-color: "#FBD150"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#04E762"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#464653"
  label-badge-text-color: "#FFFFFF"
  label-badge-red: "#343443"
  ### Cards ###
  paper-card-background-color: "#23232E"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#04E762"
  paper-toggle-button-checked-bar-color: "#47FC92"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#343443"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Light – Green

Light - Green:
  ### Main Interface Colors ###
  primary-color: "#03B14B"
  light-primary-color: "#47FC92"
  primary-background-color: "#F6F7F9"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#B9CDC3"
  ### Text ###
  primary-text-color: "#788083"
  secondary-text-color: "#03B14B"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#A8ADAF"
  ### Sidebar Menu ###
  sidebar-icon-color: "#788083"
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#12D289"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#12D289"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#12D289"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#F8FAF9"
  label-badge-text-color: "#788083"
  label-badge-red: "#3FEFAC"
  ### Cards ###
  paper-card-background-color: "#FFFFFF"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#03B14B"
  paper-toggle-button-checked-bar-color: "#12D289"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#ABB0B2"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Dark – Red

Dark - Red:
  ### Main Interface Colors ###
  primary-color: "#EA1111"
  light-primary-color: "#F35858"
  primary-background-color: "#141414"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#2D2D2D"
  ### Text ###
  primary-text-color: "#EAEEF1"
  secondary-text-color: "#EA1111"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#666666"
  ### Sidebar Menu ###
  sidebar-icon-color: "#979797"
  sidebar-text-color: "#EAEEF1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#EA1111"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#EA1111"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#EA1111"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#424242"
  label-badge-text-color: "#EAEEF1"
  label-badge-red: "#424242"
  ### Cards ###
  paper-card-background-color: "#1A1A1A"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#EA1111"
  paper-toggle-button-checked-bar-color: "#F36060"
  paper-toggle-button-unchecked-button-color: "#757575"
  paper-toggle-button-unchecked-bar-color: "#424242"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Gray & Green

Gray & Green:
  ### Main Interface Colors ###
  primary-color: "#24E081"
  light-primary-color: "#6BEAAA"
  primary-background-color: "#494B58"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#595B6B"
  ### Text ###
  primary-text-color: "#FBFBFB"
  secondary-text-color: "#24E081"
  text-primary-color: "#FBFBFB"
  disabled-text-color: "#7A7D90"
  ### Sidebar Menu ###
  sidebar-icon-color: "#A2A4B2"
  sidebar-text-color: "#FBFBFB"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#24E081"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#24E081"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#24E081"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  paper-green-400: "#FBCD41"
  ### Labels ###
  label-badge-background-color: "#9A9CAB"
  label-badge-text-color: "#FBFBFB"
  label-badge-red: "#555766"
  ### Cards ###
  paper-card-background-color: "#555766"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#24E081"
  paper-toggle-button-checked-bar-color: "#6BEAAA"
  paper-toggle-button-unchecked-button-color: "#A2A4B2"
  paper-toggle-button-unchecked-bar-color: "#787B8F"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Dark – Gray

Dark - Gray:
  ### Main Interface Colors ###
  primary-color: "#A3A3A3"
  light-primary-color: "#C5C5C5"
  primary-background-color: "#272727"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#343434"
  ### Text ###
  primary-text-color: "#FFFFFD"
  secondary-text-color: "#87BF50"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#A3A3A3"
  ### Sidebar Menu ###
  sidebar-icon-color: "#A3A3A3"
  sidebar-text-color: "#FFFFFD"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#87BF50"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#87BF50"
  state-icon-active-color: "#F7AA1C"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#87BF50"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#575757"
  label-badge-text-color: "#FFFFFD"
  label-badge-red: "#575757"
  ### Cards ###
  paper-card-background-color: "#2D2D2D"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#87BF50"
  paper-toggle-button-checked-bar-color: "#598330"
  paper-toggle-button-unchecked-button-color: "#A3A3A3"
  paper-toggle-button-unchecked-bar-color: "#6F6F6F"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Dark – Blue

Dark - Blue:
  ### Main Interface Colors ###
  primary-color: "#2F7EFD"
  light-primary-color: "#6FA6FE"
  primary-background-color: "#1F1F28"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#2F2F3D"
  ### Text ###
  primary-text-color: "#FFFFFF"
  secondary-text-color: "#6FA6FE"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#4E4E66"
  ### Sidebar Menu ###
  sidebar-icon-color: "#B6B6C1"
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#6FA6FE"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#2F7EFD"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#2F7EFD"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: "#6FA6FE"
  ### Cards ###
  paper-card-background-color: "#23232E"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#2F7EFD"
  paper-toggle-button-checked-bar-color: "#6FA6FE"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#3E4756"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Light – Blue

Light - Blue:
  ### Main Interface Colors ###
  primary-color: "#2F7EFD"
  light-primary-color: "#6FA6FE"
  primary-background-color: "#FEFEFE"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#E0E2EA"
  ### Text ###
  primary-text-color: "#4D5575"
  secondary-text-color: "#2F7EFD"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#A6B0BF"
  ### Sidebar Menu ###
  sidebar-icon-color: "#818AAC"
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#6FA6FE"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#2F7EFD"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#2F7EFD"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#F8FAF9"
  label-badge-text-color: "#4D5575"
  label-badge-red: "#6FA6FE"
  ### Cards ###
  paper-card-background-color: "#FCFCFC"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#2F7EFD"
  paper-toggle-button-checked-bar-color: "#6FA6FE"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#BFC6D1"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Dark – Light Red

Dark - Light Red:
  ### Main Interface Colors ###
  primary-color: "#FF6262"
  light-primary-color: "#FF8888"
  primary-background-color: "#20252F"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#2F2F3D"
  ### Text ###
  primary-text-color: "#FFFFFF"
  secondary-text-color: "#FF8888"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#5B5B77"
  ### Sidebar Menu ###
  sidebar-icon-color: "#7D8BA6"
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FF8888"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FF6262"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FF6262"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#252B36"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: "#6C7B9B"
  ### Cards ###
  paper-card-background-color: "#252B36"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FF6262"
  paper-toggle-button-checked-bar-color: "#FFA3A3"
  paper-toggle-button-unchecked-button-color: "#6C7B9B"
  paper-toggle-button-unchecked-bar-color: "#434E62"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Light – Light Red

Light - Light Red:
  ### Main Interface Colors ###
  primary-color: "#FF6262"
  light-primary-color: "#FF8888"
  primary-background-color: "#F6F7F9"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#D6DFEB"
  ### Text ###
  primary-text-color: "#395274"
  secondary-text-color: "#FF6262"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#88A1C4"
  ### Sidebar Menu ###
  sidebar-icon-color: "#395274"
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FF6262"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FF6262"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FF6262"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#FFFFFF"
  label-badge-text-color: "#395274"
  label-badge-red: "#395274"
  ### Cards ###
  paper-card-background-color: "#FFFFFF"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FF6262"
  paper-toggle-button-checked-bar-color: "#FFA3A3"
  paper-toggle-button-unchecked-button-color: "#395274"
  paper-toggle-button-unchecked-bar-color: "#9CB2CE"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Dark – Blue/Purple

Dark - Blue/Purple:
  ### Main Interface Colors ###
  primary-color: "#007AFF"
  light-primary-color: "#4DA3FF"
  primary-background-color: "#141A32"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#3B4C8B"
  ### Text ###
  primary-text-color: "#FFFFFF"
  secondary-text-color: "#4DA3FF"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#4F5F78"
  ### Sidebar Menu ###
  sidebar-icon-color: "#4F6B95"
  sidebar-text-color: "#CBD5E4"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#4DA3FF"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#007AFF"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#007AFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#1E2747"
  label-badge-text-color: "#FFFFFF"
  label-badge-red: "#3B4C8B"
  ### Cards ###
  paper-card-background-color: "#1E2747"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FCFCFC"
  paper-toggle-button-checked-bar-color: "#4DA3FF"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#303F79"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Dark – Orange

Dark - Orange:
  ### Main Interface Colors ###
  primary-color: "#FF8300"
  light-primary-color: "#FFA23F"
  primary-background-color: "#1F1F28"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#353544"
  ### Text ###
  primary-text-color: "#FFFFFF"
  secondary-text-color: "#FF8300"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#595975"
  ### Sidebar Menu ###
  sidebar-icon-color: "#7D8BA6"
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFA23F"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FF8300"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FF8300"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#363647"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: "#FFA23F"
  ### Cards ###
  paper-card-background-color: "#23232E"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FF8300"
  paper-toggle-button-checked-bar-color: "#FFA23F"
  paper-toggle-button-unchecked-button-color: "#767679"
  paper-toggle-button-unchecked-bar-color: "#444446"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Light – Orange

Light - Orange:
  ### Main Interface Colors ###
  primary-color: "#FF8300"
  light-primary-color: "#FFA23F"
  primary-background-color: "#F4F5F8"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#C1C5D5"
  ### Text ###
  primary-text-color: "#4B4B4D"
  secondary-text-color: "#FF8300"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#A6A6BB"
  ### Sidebar Menu ###
  sidebar-icon-color: "#7D8BA6"
  sidebar-text-color: "#4B4B4D"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFA23F"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FF8300"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FF8300"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#FFFFFF"
  label-badge-text-color: "#4B4B4D"
  label-badge-red: "#FFA23F"
  ### Cards ###
  paper-card-background-color: "#FFFFFF"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FF8300"
  paper-toggle-button-checked-bar-color: "#FFA23F"
  paper-toggle-button-unchecked-button-color: "#767679"
  paper-toggle-button-unchecked-bar-color: "#AAAAAD"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Dark – Yellow

Dark - Yellow:
  ### Main Interface Colors ###
  primary-color: "#FCB800"
  light-primary-color: "#FFCD44"
  primary-background-color: "#141414"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#262626"
  ### Text ###
  primary-text-color: "#EBEBEB"
  secondary-text-color: "#FCB800"
  text-primary-color: "#141414"
  disabled-text-color: "#5D5D5D"
  ### Sidebar Menu ###
  sidebar-icon-color: "#8E8E8E"
  sidebar-text-color: "#EBEBEB"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FCB800"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FCB800"
  state-icon-active-color: "#FDEAB0"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FCB800"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#515151"
  label-badge-text-color: "#EBEBEB"
  label-badge-red: "#515151"
  ### Cards ###
  paper-card-background-color: "#1A1A1A"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FCB800"
  paper-toggle-button-checked-bar-color: "#FFD45D"
  paper-toggle-button-unchecked-button-color: "#8E8E8E"
  paper-toggle-button-unchecked-bar-color: "#515151"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Light – Yellow

Light - Yellow:
  ### Main Interface Colors ###
  primary-color: "#FCB800"
  light-primary-color: "#FFCD44"
  primary-background-color: "#F2F2F2"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#DFDFDF"
  ### Text ###
  primary-text-color: "#141414"
  secondary-text-color: "#FCB800"
  text-primary-color: "#141414"
  disabled-text-color: "#A6A6A6"
  ### Sidebar Menu ###
  sidebar-icon-color: "#8E8E8E"
  sidebar-text-color: "#141414"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FCB800"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FCB800"
  state-icon-active-color: "#FDEAB0"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FCB800"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#FBFBFB"
  label-badge-text-color: "#141414"
  label-badge-red: "#515151"
  ### Cards ###
  paper-card-background-color: "#FBFBFB"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FCB800"
  paper-toggle-button-checked-bar-color: "#FFD45D"
  paper-toggle-button-unchecked-button-color: "#515151"
  paper-toggle-button-unchecked-bar-color: "#D3D3D3"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Navy Blue & Yellow

Navy Blue & Yellow:
  ### Main Interface Colors ###
  primary-color: "#FEB221"
  light-primary-color: "#FECA67"
  primary-background-color: "#1F2635"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#2D374D"
  ### Text ###
  primary-text-color: "#FBFBFB"
  secondary-text-color: "#FEB221"
  text-primary-color: "#FBFBFB"
  disabled-text-color: "#4A5E84"
  ### Sidebar Menu ###
  sidebar-icon-color: "#8192B6"
  sidebar-text-color: "#FBFBFB"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FEB221"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FEAA0A"
  state-icon-active-color: "#FEF5D8"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FEB221"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#3E4C6C"
  label-badge-text-color: "#FBFBFB"
  label-badge-red: "#252D40"
  ### Cards ###
  paper-card-background-color: "#252D40"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FEB221"
  paper-toggle-button-checked-bar-color: "#FECA67"
  paper-toggle-button-unchecked-button-color: "#6E81AA"
  paper-toggle-button-unchecked-bar-color: "#3E4C6C"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Dark – Cyan

Dark - Cyan:
  ### Main Interface Colors ###
  primary-color: "#00E4D7"
  light-primary-color: "#71FFF7"
  primary-background-color: "#1F1F28"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#2C2C39"
  ### Text ###
  primary-text-color: "#F7F8FA"
  secondary-text-color: "#00E2D8"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#5B7283"
  ### Sidebar Menu ###
  sidebar-icon-color: "#BCC5D1"
  sidebar-text-color: "#F7F8FA"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#00E2D8"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#00C5E3"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#00E2D8"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: "#00C5E3"
  ### Labels ###
  label-badge-background-color: "#2F2F3D"
  label-badge-text-color: "#F7F8FA"
  label-badge-red: "#444459"
  ### Cards ###
  paper-card-background-color: "#23232E"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#00E2D8"
  paper-toggle-button-checked-bar-color: "#00EDE0"
  paper-toggle-button-unchecked-button-color: "#A8B3C3"
  paper-toggle-button-unchecked-bar-color: "#CED5DD"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Light – Cyan

Light - Cyan:
  ### Main Interface Colors ###
  primary-color: "#00E4D7"
  light-primary-color: "#71FFF7"
  primary-background-color: "#F7F8FA"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#E4E8EE"
  ### Text ###
  primary-text-color: "#6D7A8C"
  secondary-text-color: "#00E2D8"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#BECAD2"
  ### Sidebar Menu ###
  sidebar-icon-color: "#BCC5D1"
  sidebar-text-color: "#6D7A8C"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#00E2D8"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#00C5E3"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#00E2D8"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: "#00C5E3"
  ### Labels ###
  label-badge-background-color: "#F7F8FA"
  label-badge-text-color: "#6D7A8C"
  label-badge-red: "#BCC5D1"
  ### Cards ###
  paper-card-background-color: "#FBFBFD"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#00E2D8"
  paper-toggle-button-checked-bar-color: "#00EDE0"
  paper-toggle-button-unchecked-button-color: "#A8B3C3"
  paper-toggle-button-unchecked-bar-color: "#CED5DD"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Dark – Purple

Dark - Purple:
  ### Main Interface Colors ###
  primary-color: "#4C3FF9"
  light-primary-color: "#6F64FA"
  primary-background-color: "#262938"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#313549"
  ### Text ###
  primary-text-color: "#F7F8FA"
  secondary-text-color: "#00ECCA"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#616387"
  ### Sidebar Menu ###
  sidebar-icon-color: "#4C3FF9"
  sidebar-text-color: "#F7F8FA"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#00ECCA"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#00ECCA"
  state-icon-active-color: "#F7AA1C"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#00ECCA"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#2E2F40"
  label-badge-text-color: "#F7F8FA"
  label-badge-red: "#323346"
  ### Cards ###
  paper-card-background-color: "#2E2F40"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#4C3FF9"
  paper-toggle-button-checked-bar-color: "#262938"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#262938"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Light – Purple

Light - Purple:
  ### Main Interface Colors ###
  primary-color: "#4C3FF9"
  light-primary-color: "#6F64FA"
  primary-background-color: "#F7F8FA"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#C4CCDA"
  ### Text ###
  primary-text-color: "#2E2F40"
  secondary-text-color: "#00ECCA"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#AEAFC4"
  ### Sidebar Menu ###
  sidebar-icon-color: "#4C3FF9"
  sidebar-text-color: "#2E2F40"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#00ECCA"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#00ECCA"
  state-icon-active-color: "#F7AA1C"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#00ECCA"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#F7F8FA"
  label-badge-text-color: "#2E2F40"
  label-badge-red: "#AFB0C5"
  ### Cards ###
  paper-card-background-color: "#FBFBFD"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#4C3FF9"
  paper-toggle-button-checked-bar-color: "#262938"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#262938"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Light – Navy Blue

Light - Navy Blue:
  ### Main Interface Colors ###
  primary-color: "#395274"
  light-primary-color: "#5F81B0"
  primary-background-color: "#F6F7F9"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#D6DFEB"
  ### Text ###
  primary-text-color: "#395274"
  secondary-text-color: "#FF6262"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#88A1C4"
  ### Sidebar Menu ###
  sidebar-icon-color: "#395274"
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FF6262"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FF6262"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FF6262"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#FFFFFF"
  label-badge-text-color: "#395274"
  label-badge-red: "#FF8888"
  ### Cards ###
  paper-card-background-color: "#FFFFFF"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FF6262"
  paper-toggle-button-checked-bar-color: "#FFA3A3"
  paper-toggle-button-unchecked-button-color: "#FF6262"
  paper-toggle-button-unchecked-bar-color: "#9CB2CE"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

© 2018 JuanMTech. All Rights Reserved