Skip to content

Instantly share code, notes, and snippets.

@kalkih
Last active March 10, 2020 02:27
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kalkih/0c7f865855f0f0e2f6d6610c4637cd5d to your computer and use it in GitHub Desktop.
Save kalkih/0c7f865855f0f0e2f6d6610c4637cd5d to your computer and use it in GitHub Desktop.
Modified midnight theme for Home Assistant
midnight-remake:
# Main colors
primary-color: '#2980b9'
accent-color: '#f1c40f'
dark-primary-color: 'var(--accent-color)'
light-primary-color: 'var(--accent-color)'
# Text colors
primary-text-color: '#ffffff'
text-primary-color: 'var(--primary-text-color)'
secondary-text-color: 'var(--accent-color)'
disabled-text-color: 'rgba(150,150,150,.5)'
label-badge-border-color: 'green'
# Background colors
primary-background-color: '#2c3e50'
secondary-background-color: 'var(--primary-background-color)'
card-background-color: 'var(--paper-card-background-color)'
divider-color: 'rgba(0, 0, 0, .12)'
# Sidebar
sidebar-icon-color: 'var(--primary-text-color)'
sidebar-selected-icon-color: 'var(--accent-color)'
sidebar-selected-text-color: 'var(--accent-color)'
sidebar-selected-background-color: 'var(--primary-background-color)'
# Table rows
table-row-background-color: '#2c3e50'
table-row-alternative-background-color: '#2B3E50'
# Nav Menu
paper-listbox-color: 'var(--primary-text-color)'
paper-listbox-background-color: '#1f2b38'
paper-grey-50: 'var(--primary-text-color)'
paper-grey-200: '#2B3E50'
# Paper card
paper-card-header-color: 'var(--accent-color)'
paper-card-background-color: '#34495e'
paper-dialog-background-color: '#34495e'
paper-item-icon-color: 'var(--primary-text-color)'
paper-item-icon-active-color: '#F9C536'
paper-item-icon_-_color: 'var(--primary-text-color)'
paper-item-selected_-_background-color: '#34495e'
paper-tabs-selection-bar-color: 'var(--primary-text-color)'
# Labels
label-badge-red: 'var(--accent-color'
label-badge-text-color: 'var(--primary-text-color'
label-badge-background-color: '#2E333A'
# Switches
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)'
# Sliders
paper-slider-knob-color: '#F9C536'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: '#F9C536'
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 colors
google-red-500: 'var(--accent-color)'
google-green-500: '#27ae60'
@Export33
Copy link

Export33 commented Oct 31, 2019

Hey,
i like this theme. Add the following line to show a proper backgound on the settings > devices page:

#Card
card-background-color: "var(--paper-card-background-color)"

@kalkih
Copy link
Author

kalkih commented Nov 1, 2019

@Export33 Awesome, thanks!

@willemvnd
Copy link

Thanks that worked !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment