Material Dark Theme (customisable accent colour)

Share your Projects! Themes
1

image
image1051×698 134 KB

Here’s just something I worked on yesterday, so might as well share. The theme is as close to the Material dark theme guidelines as possible in Home Assistant currently. If there’s any issues, just let me know. :cat:

The theme has a customisable accent colour, simply change the value at the top of the theme and all colours should adjust accordingly. :purple_heart:

dark:
  # Accent Colour (Edit this to change the accent) #
  accent: "#FF4081"


  # Background
  primary-background-color: "#121212"

  # Text
  primary-text-color: "#FFFFFFDE"
  secondary-text-color: "#FFFFFF99"
  disabled-text-color: "#FFFFFF61"
  sidebar-selected-text-color: "var(--accent)"

  # Card
  card-background-color: "#1D1D1D"
  paper-card-background-color: "#1D1D1D"

  # Colours
  primary-color: "#1D1D1D"
  secondary-background-color: "#1D1D1D"
  accent-color: "var(--accent)"
  dark-primary-color: "var(--accent)"
  light-primary-color: "var(--accent)"

  # Controls
  toggle-button-color: "var(--accent)"
  paper-toggle-button-checked-button-color: "var(--accent)"
  paper-toggle-button-checked-bar-color: "var(--accent)"
  paper-toggle-button-checked-ink-color: "var(--accent)"
  paper-toggle-button-unchecked-button-color: "#A5A5A5"
  paper-toggle-button-unchecked-bar-color: "#787878"
  paper-checkbox-checked-color: "var(--accent)"
  paper-checkbox-checked-ink-color: "var(--accent)"
  paper-radio-button-checked-color: "var(--accent)"
  paper-input-container-focus-color: "var(--accent)"
  paper-dropdown-menu-focus-color: "var(--accent)"
  slider-color: "var(--accent)"
  mdc-theme-primary: "var(--accent)"

  # Icons
  state-icon-color: "#A0A0A0"
  state-icon-active-color: "var(--accent)"
  sidebar-selected-icon-color: "var(--accent)"
  sidebar-icon-color: "#A0A0A0"

  # Badges
  ha-label-badge-color: "var(--accent)"
  label-badge-background-color: "#121212"
  label-badge-text-color: "var(--secondary-text-color)"

  # Tabs
  paper-tab-ink: "var(--accent)"

  # Divider
  divider-color: "#2D2D2D"

  # Lumo
  lumo-base-color: "#2D2D2D"
  lumo-tint-5pct: "none"
  lumo-shade-5pct: "#272727"
  paper-grey-200: "#272727"
  lumo-primary-color-10pct: "#2D2D2D"
  lumo-primary-color-50pct: "none"
  lumo-box-shadow-m: "none"
  lumo-primary-color: "var(--accent)"
  lumo-header-text-color: "var(--primary-text-color)"
  lumo-body-text-color: "var(--primary-text-color)"
  lumo-tertiary-text-color: "var(--secondary-text-color)"
  lumo-primary-contrast-color: "var(--primary-text-color)"
20 Likes
2

Thanks for this, I used this and modified it a bit but love it!

1 Like
3

Thanks for this inspiration.

material_dark_theme_custom_preview
material_dark_theme_custom_preview1900×936 587 KB

I have changed it a bit and added runded corners etc, my code can be found here: https://github.com/allanpersson/home-assistant-config/blob/master/config/themes/material_dark_theme_custom.yaml

4 Likes
4

Does anyone else have an issue with this where when checking a toggle the toggle has stopped turning to the accent colour and is instead turning black?

Looking at the element it looks like the element itself has --mdc-theme-secondary: var(--primary-color); in the style tag on the switch element…
image

which seems to be causing the issue, but not for the default theme? Can’t figure out how to fix this, and really don’t want to have to stop using this theme.

5

I get the same thing happen with another theme on here, the ‘Midnight Red’ theme.

It seems that it is a known bug and it should be fixed in the next release, so I’m waiting for the fix myself.

6

This theme is now available on HACS :smile:

7

Fixed it. Add:

switch-checked-color: “var(–accent)”

8

Just added this, and my toggles are black/grey, not the accent.

9

How’d you pull off that sweet sidebar?

1 Like