res/style/dark.scss

1 // Main background color
2 $background-color: #121212;
3 // Secondary background color for borders etc.
4 $secondary-background-color: #282828;
5 // Header background color for list titles etc.
6 $header-background-color: #181818;
7 // Background color for buttons or other selectable items
8 $button-background-color: #333333;
11 $scrollbar-handle-color: #4d4d4d;
13 // Sidebar background color
14 $sidebar-background-color: #000000;
15 // Sidebar font color
16 $sidebar-foreground-color: #b3b3b3;
18 // Menu background color
19 $menu-background-color: $secondary-background-color;
21 $menu-hover-background-color: #3e3e3e;
23 // Input background color for text inputs etc.
24 $input-background-color: #3e3e3e;
25 // Input foreground color
26 $input-foreground-color: #ffffff;
28 $input-secondary-background-color: #b2b2b2;
30 // Main font color
31 $foreground-color: #f5f5f5;
33 $highlight-color: $secondary-background-color;
34 // Font color of selected items etc.
35 $highlight-foreground-color: $foreground-color;
36 // Main Spotify green color
37 $theme-color: #1db954;
39 $disabled-color: #aba398;
42 $slider-background-color: #535353;
44 $slider-foreground-color: $sidebar-foreground-color;
46 $slider-handle-color: #ffffff;
54 @mixin selection-foreground($color) {  parameter
55 	selection-color: $color;
58 		color: $color;
63 	color: $foreground-color;
65 	selection-background-color: $highlight-color;
68 		background-color: $highlight-color;
71 	@include selection-foreground($highlight-foreground-color);
75 	border: 1px solid $secondary-background-color;
76 	background-color: $background-color;
77 	color: $foreground-color;
92 		background-color: $scrollbar-handle-color;
102 	background-color: $button-background-color;
110 	background-color: $background-color;
113 		background-color: $header-background-color;
114 		color: $sidebar-foreground-color;
118 		background-color: $background-color;
128 		background-color: $header-background-color;
133 	background-color: $menu-background-color;
136 		background-color: $secondary-background-color;
141 			background-color: $menu-hover-background-color;
145 			color: $disabled-color;
151 	background-color: $input-background-color;
152 	color: $input-foreground-color;
157 		color: $disabled-color;
162 	background-color: $sidebar-background-color;
165 		background-color: $secondary-background-color;
170 			background-color: $secondary-background-color;
174 			selection-background-color: $theme-color;
177 				background-color: $slider-handle-color;
189 				background-color: $menu-hover-background-color;
194 				background-color: $secondary-background-color;
195 				border-bottom-color: $theme-color;
204 		color: $sidebar-foreground-color;
205 		background-color: $sidebar-background-color;
206 		@include selection-foreground($sidebar-foreground-color);
209 			background-color: $sidebar-background-color;
215 	background-color: $background-color;
218 		color: $foreground-color;
219 		background-color: $sidebar-background-color;
220 		@include selection-foreground($foreground-color);
237 	background-color: $sidebar-background-color;