home-assistant-community-themes / theme-request

Your or another awesome theme not listed yet? Create an issue here!

Theme Request

Your or another awesome theme not listed yet? Create an issue here!

Request a theme here.

theme-request's Issues

New theme: blackened (adaptation of AMOLED)

General information

Owner

krissen

Name

Blackened

Post link

https://community.home-assistant.io/t/blackened-an-adaptation-of-the-amoled-theme/159997

Funding

Screenshot(s)

Source

Github repo

Home Assistant Neon glow themes

General information

Owner
Owner: Pieter Bezuidenhout
Link to github: https://github.com/Welsyntoffie/Neon_glow/tree/development

I plan to create multiple variations of the theme. Blue, Green, Yellow, Pink, Red

Name
neon_glows

Post link
Inspiration and starting point began from https://github.com/orickcorreia/caule-themes-pack-1. Thats where I got the idea to start a neon glow themes.

Funding
[email protected] (PayPal)

Screenshot(s)

Source

Blue neon edge:

Header:

app-header-background-color: rgb(23, 23, 23)

lovelace-background: 'center / cover no-repeat url("/hacsfiles/themes/blue_neon_edge/b1_blue.jpg") fixed'
app-header-background-color: rgba(52, 170, 223,0.5)
app-header-text-color: rgb(198, 203, 210)
app-header-selection-bar-color: var(--primary-color)
app-header-edit-background-color: rgb(136, 136, 136)

Main Interface Colors

primary-color: rgb(138, 180, 248)
primary-background-color: rgb(23, 23, 23)
secondary-background-color: rgb(32, 33, 36)
divider-color: var(--primary-background-color)
accent-color: var(--primary-color)

Text

primary-text-color: rgb(3, 255, 255)
secondary-text-color: rgb(5, 163, 242)
text-primary-color: var(--primary-text-color)
disabled-text-color: rgba(184, 190, 199, 0.4)

Sidebar Menu

sidebar-icon-color: rgb(52, 170, 223)
sidebar-text-color: rgb(198, 203, 210)
sidebar-background-color: rgb(32, 33, 36)
sidebar-selected-icon-color: rgb(138, 180, 248)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)

Buttons

paper-item-icon-color: rgb(169, 177, 188)
paper-item-icon-active-color: rgb(138, 180, 248)
mdc-button-outline-color: rgb(138, 180, 248)

States and Badges

state-icon-color: var(--paper-item-icon-color)
state-icon-active-color: var(--paper-item-icon-active-color)
state-icon-unavailable-color: var(--disabled-text-color)

Sliders

paper-slider-knob-color: rgb(52, 170, 223)
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: var(--secondary-background-color)
label-badge-text-color: var(--primary-text-color)
label-badge-red: rgb(208, 101, 104)
label-badge-green: rgb(128, 200, 132)
label-badge-blue: rgb(138, 180, 248)
label-badge-yellow: rgb(223, 194, 113)
label-badge-gray: rgb(95, 98, 103)

Cards

ha-card-border-radius: 6px
card-background-color: rgb(32, 33, 36)
ha-card-background: rgba(0, 15, 20, 0.5)
ha-card-border-color: rgb(42, 43, 46)
ha-card-box-shadow: 0px 0px 6px 2px rgba(52, 170, 223,0.9)
paper-dialog-background-color: var(--card-background-color)
paper-listbox-background-color: var(--card-background-color)
paper-card-background-color: var(--card-background-color)

Switches

switch-checked-button-color: rgb(52, 170, 223)
switch-checked-track-color: rgb(138, 180, 248)
switch-unchecked-button-color: rgb(172, 176, 185)
switch-unchecked-track-color: rgb(154, 160, 166)

Toggles

paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)

Table

table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)

Dropdowns

material-background-color: var(--table-row-background-color)
material-secondary-background-color: var(--table-row-alternative-background-color)
mdc-theme-surface: var(--secondary-background-color)

Pre/Code

markdown-code-background-color: rgb(23, 23, 23)
code-editor-background-color: rgb(23, 23, 23)

Checkboxes

mdc-checkbox-unchecked-color: rgb(169, 177, 188)
mdc-checkbox-disable-color: var(--disabled-text-color)
mdc-select-fill-color: rgb(42, 43, 46)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-label-ink-color: var(--secondary-text-color)
mdc-select-idle-line-color: var(--primary-text-color)
mdc-select-dropdown-icon-color: var(--secondary-text-color)
mdc-select-hover-line-color: var(--accent-color)
mdc-text-field-fill-color: var(--mdc-select-fill-color)

Input

input-fill-color: var(--secondary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-idle-line-color: var(--primary-text-color)
input-hover-line-color: var(--accent-color)
#RGB
rgb-primary-text-color: 169, 177, 188
rgb-primary-color: 169, 177, 188

Image used for background...

Darkish Theme

General information

Owner

78wesley

Name

Darkish Theme

Post link

https://github.com/78wesley/Darkish-Theme

Funding

Screenshot(s)

Screenshots are in the repository and in the README.MD
https://github.com/78wesley/Darkish-Theme/tree/master/docs

Source

darkish.yaml

Vaporwave Pink Theme

General information

Owner
linsvensson

Name
Vaporwave Pink Theme

Post link
https://github.com/linsvensson/vaporwave-pink-theme

Funding

Screenshot(s)

Source

vaporwave-pink-yaml

Matrix Reloaded

I'm publishing my updated Matrix theme, and would be happy to include it here.

General information

Owner

me (@mrand)

Name

Matrix Reloaded

Post link

https://github.com/mrand/matrix_reloaded

Skynet Theme!

Would love to see a Skynet theme with a terminator background!

Nord Theme

General information

Owner

Jasperro - https://github.com/jasperro, https://community.home-assistant.io/u/jasperro/

Name

Nord

Post link

https://community.home-assistant.io/t/nord-theme/129301

Description
This theme is based on the Nord colors from nordtheme.com, and offers multiple accent colors to choose from.

Screenshot(s)

https://imgur.com/a/X4ScUSq

Source

nord:
  # Color Setup
  light-background-color: "#3b4252"
  lighter-background-color: "#454c5f"
  dark-background-color: "#2E3440"
  card-background-color: "#4c566a"
  foreground-color: "#eceff4"
  #accent-color: "#8fbcbb" # Nord7 - calm blue
  #accent-color: "#88c0d0" # Nord8 - bright blue
  accent-color: "#81a1c1" # Nord9  - muted blue (default)
  #accent-color: "#5e81ac" # Nord10 - blue
  #accent-color: "#bf616a" # Nord11 - red
  #accent-color: "#d08770" # Nord12 - orange
  #accent-color: "#ebcb8b" # Nord13 - yellow
  #accent-color: "#a3be8c" # Nord14 - green
  #accent-color: "#b48ead" # Nord15 - purple
  

  primary-color: "var(--accent-color)"
  light-primary-color: "var(--dark-background-color)"
  primary-background-color: "var(--dark-background-color)"
  secondary-background-color: "var(--dark-background-color)"
  divider-color: "var(--dark-background-color)"

  paper-grey-50: "var(--accent-color)"
  paper-grey-200: "var(--dark-background-color)"

  primary-text-color: "var(--foreground-color)"
  secondary-text-color: "var(--foreground-color)"
  disabled-text-color: "var(--light-background-color)"
  light-disabled-text-color: "var(--lighter-background-color)"
  dark-primary-color: "var(--accent-color)"

  # Interface
  ha-card-border-radius: "0px"
  primary-font-family: "Roboto Condensed, Roboto, system-ui"

  # Paper
  paper-card-background-color: "var(--card-background-color)"
  paper-card-header-color: "var(--accent-color)"

  paper-listbox-background-color: "var(--light-background-color)"
  paper-listbox-color: "var(--accent-color)"

  paper-item-selected_-_background-color: "var(--dark-background-color)"
  paper-item-icon-color: "var(--foreground-color)"
  paper-item-icon_-_color: "var(--foreground-color)"
  paper-item-icon-active-color: "var(--accent-color)"

  # Label-badge
  label-badge-text-color: "var(--foreground-color)"
  label-badge-background-color: "var(--card-background-color)"
  label-badge-red: "var(--accent-color)"

  # Slider
  paper-slider-active-color: "var(--accent-color)"
  paper-slider-secondary-color: "var(--accent-color)"
  paper-slider-knob-color: "var(--accent-color)"
  paper-slider-knob-start-color: "var(--accent-color)"
  paper-slider-pin-color: "var(--accent-color)"

  # Toggle
  paper-toggle-button-unchecked-bar-color: "var(--accent-color)"
  paper-toggle-button-unchecked-button-color: "var(--accent-color)"
  paper-toggle-button-unchecked-ink-color: "var(--accent-color)"

  paper-toggle-button-checked-bar-color: "var(--accent-color)"
  paper-toggle-button-checked-button-color: "var(--accent-color)"

  # Switch
  switch-unchecked-track-color: "var(--disabled-text-color)"
  switch-unchecked-color: "var(--light-disabled-text-color)"

  switch-checked-track-color: "var(--accent-color)"
  switch-checked-color: "var(--accent-color)"

  # Font Settings
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"
  ha-card-header-color: "var(--foreground-color)"

  # Other
  sidebar-icon-color: "var(--foreground-color)"
  sidebar-background-color: "var(--light-background-color)"

AMOLED Theme

General information

Owner

lance36

Name

Amoled

Post link

maartenpaauw/home-assistant-community-themes#2

Funding

https://www.paypal.me/k3png

Screenshot(s)

https://i.imgur.com/ArcMnlY.png

Source

amoled:
  primary-color: "#484A4C"
  accent-color: "#E45E65"
  dark-primary-color: "var(--accent-color)"
  light-primary-color: "var(--accent-color)"
  primary-text-color: "#FFFFFF"
  text-primary-color: "var(--primary-text-color)"
  secondary-text-color: "#5294E2"
  disabled-text-color: "#7F848E"
  label-badge-border-color: "green"
  primary-background-color: "#000000"
  secondary-background-color: "#383C45"
  sidebar-text-color: "var(--primary-color)"
  sidebar-icon-color: "var(--primary-color)"
  sidebar-selected-text-color: "var(--primary-text-color)"
  sidebar-selected-icon-color: "var(--primary-text-color)"
  divider-color: "rgba(0, 0, 0, .12)"
  table-row-background-color: "#353840"
  table-row-alternative-background-color: "#3E424B"
  paper-listbox-color: "#FFFFFF)"
  paper-listbox-background-color: "#000000"
  paper-grey-50: "var(--primary-text-color)"
  paper-grey-200: "#414A59"
  paper-card-header-color: "var(--accent-color)"
  paper-card-background-color: "#000000"
  paper-dialog-background-color: "#000000"
  paper-item-icon-color: "var(--primary-text-color)"
  paper-item-icon-active-color: "#F9C536"
  paper-item-icon_-_color: "green"
  paper-item-selected_-_background-color: "#434954"
  paper-tabs-selection-bar-color: "green"
  label-badge-red: "var(--accent-color)"
  label-badge-text-color: "var(--primary-text-color)"
  label-badge-background-color: "#2E333A"
  paper-button-ink-color: "#5294E2"
  paper-button-color: "#5294E2"
  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)"
  google-red-500: "#E45E65"
  google-green-500: "#39E949"

Stell Blue with Colors Theme

General information

Owner

https://github.com/joselito11

Name

Stell Blue with Colors Theme

Post link

https://github.com/joselito11/home-assistant

Screenshot(s)

Source

https://github.com/joselito11/home-assistant/blob/master/themes/DarkSteelBlueColors.yaml

DarkSteelBlueColors:
  text-color: "white"
  text-medium-light-color: "orange"
  text-medium-color: "olivedrab"
  text-dark-color: "olivedrab"
  accent-color: "crimson"
  accent-medium-color: "crimson"
  background-color: "#484E59"
  background-color-2: "#484E59"
  background-card-color: "#4f5663"
  border-color: "red"
  primary-color: "steelblue"
  text-primary-color: "white"
  paper-listbox-background-color: "#4f5663"
  sidebar-icon-color: "steelblue"
  sidebar-selected-icon-color: "lightsteelblue"
  sidebar-selected-text-color: "lightsteelblue"
  paper-card-header-color: "red"
  primary-background-color: "var(--background-color)"
  mdc-theme-primary: "var(--accent-medium-color)"
  paper-card-background-color: "var(--background-card-color)"
  dark-primary-color: "var(--text-color)"
  primary-text-color: "#e1e1e3"
  paper-listbox-color: "yellow"
  light-primary-color: "steelblue"
  secondary-text-color: "olivedrab"
  disabled-text-color: "BlueViolet "
  paper-dialog-button-color: "yellow"
  secondary-background-color: "var(--background-color-2)"
  paper-item-icon-color: "steelblue"
  paper-item-icon-active-color: "darkorange"
  paper-toggle-button-checked-button-color: "olivedrab"
  paper-toggle-button-checked-bar-color: "darkgray"
  paper-toggle-button-unchecked-button-color: "IndianRed  "
  paper-toggle-button-unchecked-bar-color: "#767682"
  shadow-elevation-2dp_-_box-shadow: "inset 0px 0px 0px 1px var(--border-color)"
  shadow-elevation-4dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-6dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-8dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-10dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-12dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-14dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-16dp_-_box-shadow: "0px 0px 0px 3px var(--text-dark-color)"

Solarized Dark

General information

Owner

DouglasK - https://community.home-assistant.io/u/douglask1

Name

Solarized Dark

Post link

https://community.home-assistant.io/t/solarized-dark/77403

Funding

Screenshot(s)

Source

solarized_dark:
  primary-color: "#586e75"
  accent-color: "#002b36"
  dark-primary-color: "#93a1a1"
  light-primary-color: "var(--accent-color)"
  primary-text-color: "#839496"
  text-primary-color: "var(--primary-text-color)"
  secondary-text-color: "#586e75"
  disabled-text-color: "#7F848E"
  label-badge-border-color: "green"
  primary-background-color: "#002b36"
  secondary-background-color: "#073642"
  divider-color: "rgba(0, 0, 0, .12)"
  table-row-background-color: "#002b36"
  table-row-alternative-background-color: "#073642"
  paper-listbox-color: "var(--primary-color)"
  paper-listbox-background-color: "var(--accent-color)"
  paper-grey-50: "var(--primary-text-color)"
  paper-grey-200: "var(--accent-color)"
  paper-card-header-color: "var(--dark-primary-color)"
  paper-card-background-color: "var(--accent-color)"
  paper-dialog-background-color: "#002b36"
  paper-item-icon-color: "var(--primary-text-color)"
  paper-item-icon-active-color: "#b58900"
  paper-item-icon_-_color: "#859900"
  paper-item-selected_-_color: "var(--accent-color)"
  paper-item-selected_-_background-color: "#cb4b16"
  paper-tabs-selection-bar-color: "#859900"
  label-badge-red: "#93a1a1"
  label-badge-text-color: "var(--primary-text-color)"
  label-badge-background-color: "var(--accent-color)"
  paper-toggle-button-checked-button-color: "#268bd2"
  paper-toggle-button-checked-bar-color: "var(--primary-color)"
  paper-toggle-button-checked-ink-color: "#268bd2"
  paper-toggle-button-unchecked-button-color: "var(--secondary-background-color)"
  paper-toggle-button-unchecked-bar-color: "var(--secondary-text-color)"
  paper-toggle-button-unchecked-ink-color: "var(--secondary-background-color)"
  paper-slider-knob-color: "var(--secondary-text-color)"
  paper-slider-knob-start-color: "var(--secondary-text-color)"
  paper-slider-pin-color: "var(--secondary-text-color)"
  paper-slider-active-color: "var(--secondary-text-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)"
  sidebar-selected-icon-color: 'var(--secondary-text-color)'
  sidebar-icon-color: 'var(--primary-text-color)'
  google-red-500: "#dc322f"
  google-green-500: "#859900"

Aqua Fiesta Theme

General information

Owner
Nicole Zeckner
GitHub: https://github.com/PurelyNicole
Community: https://community.home-assistant.io/u/purelynicole/summary

Name
Aqua Fiesta

Post link
https://github.com/PurelyNicole/aqua-fiesta-theme

Funding
n/a

Screenshot(s)

https://github.com/PurelyNicole/aqua-fiesta-theme/blob/master/docs/kitchen-dash.PNG
More screenshots are on the GitHub page readme.

Source

---
#
# Aqua Fiesta Theme
#
aqua-fiesta:
  accent-color: "#f9a825"
  card-background-color: var(--secondary-background-color)
  dark-primary-color: "#007c91"
  default-primary-color: var(--primary-color)
  disabled-text-color: '#777777'
  ha-user-badge: var(--accent-color)
  label-badge-red: var(--primary-color)
  label-badge-text-color: var(--primary-text-color)
  light-primary-color: "#5ddef4"
  lumo-body-text-color: var(--dark-primary-color)
  lumo-primary-color: var(--text-primary-color)
  lumo-primary-text-color: var(--text-primary-color)
  lumo-secondary-text-color: var(--text-primary-color)
  mdc-theme-primary: var(--primary-color)
  paper-card-background-color: var(--secondary-background-color)
  paper-card-header-color: var(--text-primary-color)
  paper-grey-200: var(--paper-listbox-background-color)
  paper-grey-50: var(--primary-text-color)
  paper-icon-item: var(--accent-color)
  paper-item-icon-active-color: var(--accent-color)
  paper-item-icon-color: var(--primary-text-color)
  paper-item-selected_-_background-color: var(--paper-card-background-color)
  paper-light-blue-500: var(--light-primary-color)
  paper-listbox-background-color: '#2f3030'
  paper-slider-active-color: var(--primary-color)
  paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-knob-color: var(--primary-color)
  paper-slider-knob-start-color: var(--primary-color)
  paper-slider-pin-color: var(--primary-color)
  paper-slider-secondary-color: var(--secondary-background-color)
  paper-tabs-selection-bar-color: var(--primary-color)
  paper-toggle-button-checked-bar-color: var(--primary-color)
  paper-toggle-button-checked-button-color: var(--primary-color)
  paper-toggle-button-checked-ink-color: var(--primary-color)
  primary-background-color: "#636363"
  primary-color: "#00acc1"
  primary-text-color: var(--text-primary-color)
  secondary-background-color: "#494949"
  secondary-text-color: var(--primary-color)
  sidebar-icon-color: var(--disabled-text-color)
  table-row-alternative-background-color: var(--paper-card-background-color)
  table-row-background-color: var(--paper-card-background-color)
  text-primary-color: "#dae0e0"