frontend.yaml

---
# https://www.home-assistant.io/components/frontend/

javascript_version: latest

#################################################################
#                                                               #
#                            Themes                             #
#                                                               #
#################################################################

themes:
  midnight:
    # Main colors
    primary-color: "#03a9f4"   # Header
    accent-color: "#03a9f4"   # Accent color
    dark-primary-color: "var(--accent-color)"   # Hyperlinks
    light-primary-color: "var(--accent-color)"   # Horizontal line in about

    # Text colors
    primary-text-color: >
      "#FFFFFF"   # Primary text colour, here is referencing dark-primary-color
    text-primary-color: "#FFFFFF"   # Primary text colour
    secondary-text-color: >
      "#8c8d90"   # For secondary titles in more info boxes etc.
    disabled-text-color: "#7F848E"   # Disabled text colour
    label-badge-border-color: >
      "green"   # Label badge border, just a reference value

    # Background colors
    primary-background-color: "#282828"   # Settings background
    secondary-background-color: "#5e5e5e"   # Main card UI background
    divider-color: "rgba(0, 0, 0, .12)"   # Divider

    # Table rows
    table-row-background-color: "#353840"   # Table row
    table-row-alternative-background-color: "#3E424B"   # Table row alternative

    # Nav Menu
    paper-listbox-color: >
      "var(--primary-color)"   # Navigation menu selection hoover
    paper-listbox-background-color: "#282828"   # Navigation menu background
    paper-grey-50: "var(--primary-text-color)"
    paper-grey-200: "#414A59"   # Navigation menu selection
    sidebar-icon-color: "var(--primary-color)"

    # Paper card
    paper-card-header-color: >
      var(--accent-color)'   # Card header text colour
    paper-card-background-color: >
      "rgba(40, 40, 40, 0.6)"   # Card background colour
    paper-dialog-background-color: >
      var(--primary-background-color)   # Card dialog background colour
    paper-item-icon-color: "var(--accent-color)"   # Icon color
    paper-item-icon-active-color: "var(--accent-color)"   # Icon color active
    paper-item-icon_-_color: "green"
    paper-item-selected_-_background-color: "#282c34"   # Popup item select
    paper-tabs-selection-bar-color: "green"

    # Labels
    label-badge-red: >
      "var(--accent-color)"   # References the brand colour label badge border
    label-badge-text-color: >
      "var(--primary-text-color)"
    label-badge-background-color: "#21252b"

    # Switches
    paper-toggle-button-checked-button-color: "var(--accent-color)"
    paper-toggle-button-checked-bar-color: "var(--accent-color)"
    paper-toggle-button-checked-ink-color: "var(--accent-color)"
    paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
    paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
    paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"

    # Sliders
    paper-slider-knob-color: "var(--accent-color)"
    paper-slider-knob-start-color: "var(--accent-color)"
    paper-slider-pin-color: "var(--accent-color)"
    paper-slider-active-color: "var(--accent-color)"
    paper-slider-container-color: >
      "linear-gradient(var(--primary-background-color),
      var(--secondary-background-color)) no-repeat"
    paper-slider-secondary-color: "var(--secondary-background-color)"
    paper-slider-disabled-active-color: "var(--disabled-text-color)"
    paper-slider-disabled-secondary-color: "var(--disabled-text-color)"

    # Google colors
    google-red-500: "#E45E65"
    google-green-500: "#39E949"

extra_html_url:
  - https://raw.githubusercontent.com/andrey-git/home-assistant-custom-ui/master/state-card-custom-ui.html
extra_html_url_es5:
  - https://raw.githubusercontent.com/andrey-git/home-assistant-custom-ui/master/state-card-custom-ui-es5.html