-
Notifications
You must be signed in to change notification settings - Fork 3
/
themes.yaml
138 lines (117 loc) · 8.95 KB
/
themes.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
clear:
# Background image
#background-image: 'center / cover no-repeat url("/local/images/day.jpg") fixed'
background-image: "radial-gradient(at 50% 50%, rgba(230, 161, 57, 0.7) 0%, rgba(11, 49, 97, 0.7) 80%)"
# Colors
text-color: '#303741' # Grey text
text-medium-color: '#8c96a5' # Medium grey text
text-light-color: '#BAC0C6' # Light grey text
accent-color: '#00a1ff' # Blue
background-color: '#F7F8F9' # Light grey background
background-color-2: '#F4F5F6' # Light grey background
background-card-color: 'rgba(255,255,255,1.0)' # White background
border-color: '#EAEAEA' # Light grey border
# Header
primary-color: 'var(--text-color)' # Background
text-primary-color: '#FFF' # Text
more-info-header-color: 'var(--text-primary-color)'
more-info-header-background: 'var(--text-color)'
# Left Menu
paper-listbox-background-color: 'var(--background-color)' # Background
# UI
paper-card-header-color: 'var(--text-color)' # Title in settings
primary-background-color: 'var(--background-color)' # Background (also title background in left menu)
# Card
paper-card-background-color: 'var(--background-card-color)' # Background
dark-primary-color: 'var(--text-color)'
primary-text-color: 'var(--text-color)'
paper-listbox-color: 'var(--text-color)'
light-primary-color: 'var(--text-light-color)'
secondary-text-color: 'var(--text-medium-color)'
disabled-text-color: 'var(--text-light-color)'
paper-dialog-button-color: 'var(--text-color)'
secondary-background-color: 'var(--background-color-2)' # Background more info title
# Icons
#paper-item-icon-color: 'var(--text-light-color)' # Off
#paper-item-icon-active-color: 'var(--accent-color)' # On
# Switches
paper-toggle-button-checked-button-color: '#FFF' # Knob On
paper-toggle-button-checked-bar-color: '#0077FF' # Background On
paper-toggle-button-unchecked-button-color: '#FFF' # Knob Off
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)' # Background Off
# Shadows
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(--light-color)'
primary-font-family: 'Lato,sans-serif'
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)"
#HACS
hacs-badge-text-color: "var(--text-primary-color)"
mini-media-player-overlay-color: 'rgba(0,0,0,0)'
midnight:
# Main colors
primary-color: '#5294E2' # Header
accent-color: '#5E75E4' # Accent color
dark-primary-color: 'var(--accent-color)' # Hyperlinks
light-primary-color: 'var(--accent-color)' # Horizontal line in about
# Text colors
primary-text-color: '#FFFFFF' # Primary text colour, here is referencing dark-primary-color
text-primary-color: 'var(--primary-text-color)' # Primary text colour
secondary-text-color: '#5294E2' # For secondary titles in more info boxes etc.
disabled-text-color: '#7F848E' # Disabled text colour
label-badge-border-color: 'green' # Label badge border, just a reference value
# Background colors
primary-background-color: '#383C45' # Settings background
secondary-background-color: '#383C45' # Main card UI background
divider-color: 'rgba(0, 0, 0, .12)' # Divider
# Table rows
table-row-background-color: '#353840' # Table row
table-row-alternative-background-color: '#3E424B' # Table row alternative
# Nav Menu
paper-listbox-color: 'var(--primary-color)' # Navigation menu selection hoover
paper-listbox-background-color: '#2E333A' # Navigation menu background
paper-grey-50: 'var(--primary-text-color)'
paper-grey-200: '#414A59' # Navigation menu selection
# Paper card
paper-card-header-color: 'var(--accent-color)' # Card header text colour
paper-card-background-color: '#434954' # Card background colour
paper-dialog-background-color: '#434954' # Card dialog background colour
paper-item-icon-color: 'var(--primary-text-color)' # Icon color
paper-item-icon-active-color: '#F9C536' # Icon color active
paper-item-icon_-_color: 'green'
paper-item-selected_-_background-color: '#434954' # Popup item select
paper-tabs-selection-bar-color: 'green'
# Labels
label-badge-red: 'var(--accent-color)' # References the brand colour label badge border
label-badge-text-color: 'var(--primary-text-color)' # Now same as label badge border but that's a matter of taste
label-badge-background-color: '#2E333A' # Same, but can also be set to transparent here
# 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: '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 colors
google-red-500: '#E45E65'
google-green-500: '#39E949'