Your or another awesome theme not listed yet? Create an issue here!
Request a theme here.
Your or another awesome theme not listed yet? Create an issue here!
Your or another awesome theme not listed yet? Create an issue here!
Request a theme here.
Owner
krissen
Name
Blackened
Post link
https://community.home-assistant.io/t/blackened-an-adaptation-of-the-amoled-theme/159997
Funding
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)
Blue neon edge:
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)
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)
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-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)
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)
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)
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)
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)
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)
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)
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-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
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)
markdown-code-background-color: rgb(23, 23, 23)
code-editor-background-color: rgb(23, 23, 23)
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-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
Owner
Name
Darkish Theme
Post link
https://github.com/78wesley/Darkish-Theme
Funding
Screenshots are in the repository and in the README.MD
https://github.com/78wesley/Darkish-Theme/tree/master/docs
Owner
linsvensson
Name
Vaporwave Pink Theme
Post link
https://github.com/linsvensson/vaporwave-pink-theme
Funding
I'm publishing my updated Matrix theme, and would be happy to include it here.
Owner
me (@mrand)
Name
Matrix Reloaded
Post link
Would love to see a Skynet theme with a terminator background!
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.
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)"
Owner
Name
Amoled
Post link
maartenpaauw/home-assistant-community-themes#2
Funding
https://i.imgur.com/ArcMnlY.png
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"
Owner
Name
Stell Blue with Colors Theme
Post link
https://github.com/joselito11/home-assistant
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)"
Owner
DouglasK - https://community.home-assistant.io/u/douglask1
Name
Solarized Dark
Post link
https://community.home-assistant.io/t/solarized-dark/77403
Funding
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"
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
https://github.com/PurelyNicole/aqua-fiesta-theme/blob/master/docs/kitchen-dash.PNG
More screenshots are on the GitHub page readme.
---
#
# 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"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.