Tribute to Discord

Hey,

I :heart_eyes: Discord’s colors and I’m happy to share my first theme creation based on this app :slight_smile:

Quick look

Yaml code
Feel free to use it and share me your thoughts !

discord:

  primary-color: "#5e74ba"
  accent-color: "#7289DA"
  dark-primary-color: "#888f9c"
  light-primary-color: "#FF73FA"
  divider-color: "rgba(166, 169, 163, 0)"
  scrollbar-thumb-color: "rgb(194, 194, 194)"

  state-icon-color: "#44739e"
  state-icon-active-color: "#FDD835"
  state-icon-unavailable-color: var(--disabled-text-color)

  primary-text-color: "#d0d0d0"
  text-primary-color: "#9eb3fd"
  secondary-text-color: "#43B581"
  disabled-text-color: "#696d68"

  # sidebar and header
  cch-all-tabs-color: "#ffffff"
  sidebar-icon-color: "#5b6eae"
  sidebar-background-color: "#202225"
  sidebar-text-color: "#696d68"
  sidebar-selected-text-color: var(--accent-color)
  sidebar-selected-icon-color: "#ffffff"
  
  label-badge-border-color: "green"
  primary-background-color: "#40444B"
  secondary-background-color: "#202225"

  label-badge-text-color: "var(--primary-text-color)"
  label-badge-background-color: "#2E333A"
  label-badge-red: "#DF4C1E"
  label-badge-blue: "#039be5"
  label-badge-green: "#0DA035"
  label-badge-yellow: "#f4b400"
  label-badge-grey: "var(--paper-grey-500)"

  paper-grey-50: "var(--primary-text-color)"
  paper-grey-200: "#3e4248"
  paper-grey-500: "#9e9e9e"

  #popup
  iron-overlay-backdrop-background-color: "#000000"
  iron-overlay-backdrop-opacity: "0.8"
  more-info-header-color: "#7289da"
  more-info-header-background: "#36393F"
  paper-dialog-background-color: "#202225"
  paper-dialog-color: "#43B581"

  #derived colors, to keep existing themes mostly working
  paper-card-header-color: "var(--accent-color)"
  paper-card-background-color: "#2F3136"
  paper-item-icon-color: "var(--primary-text-color)"
  paper-item-icon-active-color: "#da870a"
  table-row-background-color: "#6a6e7385"
  table-row-alternative-background-color: "#56595d8f"
  paper-listbox-color: "#ffffff"
  paper-listbox-background-color: "#202225"
  paper-tabs-selection-bar-color: "#ffffff"

  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)"
  
  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)"
  
  # for paper-spinner
  google-red-500: "#db4437"
  google-blue-500: "#4285f4"
  google-green-500: "#0f9d58"
  google-yellow-500: "#f4b400"
  paper-spinner-color: "var(--primary-color)"

  # opacity for light text on a dark background
  light-divider-opacity: "0.12"
  light-disabled-opacity: "0.3"
  light-secondary-opacity: "0.7"
  light-primary-opacity: "1.0"

  mdc-theme-primary: "#43B581"

Or on this repo : https://github.com/wimip/home-assistant-themes

PS : For **French speacking HA addicts ( :fr: :switzerland: :belgium: :senegal: :canada: …) **, fell free to join us on Paradis Artificiel’s Discord server

Edit : Tweak of the primary color

10 Likes

That’s really nice. Well done.

1 Like

Agreed, very nice. Would it be possible please to make your github repo compatible with HACS? Details are here https://hacs.netlify.com/developer/theme/

2 Likes

Thank you for the advice.
I wanted to add multiple themes in this repo.
It seams that HACS accepts only one. Should I create one repo by theme ?!

btw I added my second theme wiki kiwi :slight_smile:

I think so, but check with @ludeeus

how did you get only the icons on top on the tabs?

CCH : https://github.com/maykar/compact-custom-header (Installed with HACS)