Material dark theme

Hi, I’ve created a material dark theme. It should be easily changeable by just changing the hex code of the inital colour. If you end up with random pink colour, it is the colour I have set to show when I couldn’t find where it is displayed in my home assistant instance. It looks pretty good and should be easy to change if you don’t like the shades. It looks good on my computer as well but i don’t have any screenshots of it.

material_dark_green:
  light_green: "#08a8a5"
  dark_green: "#017775"
  dark_grey: "#232326"
  light_grey: "#344249"

  red: "#d10404"
  yellow: "#fffa0c"
  white: "#f7f7f7"
  pink: "#ff0090"

#Top bar, activate text on script, selected icon on home assistant menu, top panel of media players, text in config page, text on developer tools states page, mqtt publish text, logbook text
  primary-color: "var(--light_green)"
# divider on dev tools info page
  light-primary-color: "var(--red)"
# some hyperlinked text
  dark-primary-color: "var(--red)"
# not sure where used
  text-primary-color: "var(--pink)"
# main background, top of side panel
  primary-background-color: "var(--dark_grey)"
# not sure where used 
  sidebar-text_-_background: "var(--pink)"
# card background colour, part of media player background
  paper-card-background-color: "var(--light_grey)"
# mqtt pubish header and thats it 
  paper-card-header-color: "var(--white)"
# main background colour of states page
  secondary-background-color: "var(--dark_grey)"
# most of the text used
  primary-text-color: "var(--white)"
#secondary pieces of text 
  secondary-text-color: "var(--white)"
#main background of side panel 
  paper-listbox-background-color: "var(--light_grey)"
#not sure where used
  paper-toggle-button-checked-ink-color: "var(--pink)"
#switch colour when on
  paper-toggle-button-checked-button-color: "var(--yellow)"
#Backgroud of switch/toggle when on
  paper-toggle-button-checked-bar-color: "var(--yellow)"
#slide knob on brightness/volumes when not 0
  paper-slider-knob-color: "var(--yellow)"
#slide knob on brightness/volumes when 0
  paper-slider-knob-start-color: "var(--red)"
#don't know where used
  paper-slider-pin-color: "var(--pink)"
#colour of brightness/volume slider line in used portion 
  paper-slider-active-color: "var(--yellow)"
#not sure where used
  paper-slider-secondary-color: "var(--pink)"
# background of brightness/volume slider line not used portion 
  paper-slider-container-color: "var(--red)"
#not sure where used
  paper-progress-secondary-color: "var(--pink)"
#background of theme selection toggle tiny use 
  paper-item-selected_-_background-color: "var(--light_green)"
#text, not sure which one "var(--white)"
  paper-item-icon_-_color: "var(--pink)"
# icon on state page when off
  paper-item-icon-color: "var(--dark_green)"
#states icon when active 
  paper-item-icon-active-color: "var(--yellow)"
#colour of switch toggle when off, icon on selected page of menu 
  paper-grey-50: "var(--light_green)"
#background of selected screen on menu "var(--light_green)"
  paper-grey-200: "var(--dark_green)"
#Backgound of label icon
  label-badge-background-color: "var(--light_grey)"
#colour of text in label icon 
  label-badge-text-color: "var(--white)"
#colour of edge of sensor labels
  label-badge-red: "var(--red)"
#not sure where used
  label-badge-blue: "var(--pink)"
  label-badge-green: "var(--pink)"
  label-badge-yellow: "var(--pink)"
  label-badge-grey: "var(--pink)"
# Row 1 on entities page
  table-row-background-color: "var(--light_grey)"
# row 2 on entities page
  table-row-alternative-background-color: "var(--dark_grey)"

6 Likes

You can now install this theme with HACS. :smile: