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;
9
10// Background for handle in scrollbars
11$scrollbar-handle-color: #4d4d4d;
12
13// Sidebar background color
14$sidebar-background-color: #000000;
15// Sidebar font color
16$sidebar-foreground-color: #b3b3b3;
17
18// Menu background color
19$menu-background-color: $secondary-background-color;
20// Menu hover
21$menu-hover-background-color: #3e3e3e;
22
23// Input background color for text inputs etc.
24$input-background-color: #3e3e3e;
25// Input foreground color
26$input-foreground-color: #ffffff;
27// Input border colors etc.
28$input-secondary-background-color: #b2b2b2;
29
30// Main font color
31$foreground-color: #f5f5f5;
32// Color of selected items etc.
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;
38// Color for disabled text etc.
39$disabled-color: #aba398;
40
41// Slider background (inactive)
42$slider-background-color: #535353;
43// Slider foreground (active)
44$slider-foreground-color: $sidebar-foreground-color;
45// Slider handle
46$slider-handle-color: #ffffff;
47
48@mixin button-style() {
49	border-style: none;
50	padding: 8px 16px;
51	border-radius: 4px;
52}
53
54@mixin selection-foreground($color) {
55	selection-color: $color;
56
57	&::item::selected {
58		color: $color;
59	}
60}
61
62QWidget {
63	color: $foreground-color;
64
65	selection-background-color: $highlight-color;
66
67	&::item::selected {
68		background-color: $highlight-color;
69	}
70
71	@include selection-foreground($highlight-foreground-color);
72}
73
74QToolTip {
75	border: 1px solid $secondary-background-color;
76	background-color: $background-color;
77	color: $foreground-color;
78}
79
80QScrollBar {
81	$size: 12px;
82
83	&:horizontal {
84		max-height: $size;
85	}
86
87	&:vertical {
88		max-width: $size;
89	}
90
91	&::handle {
92		background-color: $scrollbar-handle-color;
93	}
94
95	&::add-line, &::sub-line {
96		width: 0px;
97		height: 0px;
98	}
99}
100
101QPushButton, QComboBox {
102	background-color: $button-background-color;
103}
104
105QPushButton {
106	@include button-style();
107}
108
109QListWidget, QTreeWidget, QTextEdit {
110	background-color: $background-color;
111
112	QHeaderView {
113		background-color: $header-background-color;
114		color: $sidebar-foreground-color;
115	}
116
117	QScrollBar {
118		background-color: $background-color;
119	}
120
121	&::item {
122		min-height: 24px;
123	}
124}
125
126QTabWidget {
127	&, QTabBar {
128		background-color: $header-background-color;
129	}
130}
131
132QMenu {
133	background-color: $menu-background-color;
134
135	&::separator {
136		background-color: $secondary-background-color;
137	}
138
139	&::item {
140		&::selected {
141			background-color: $menu-hover-background-color;
142		}
143
144		&::disabled {
145			color: $disabled-color;
146		}
147	}
148}
149
150QLineEdit {
151	background-color: $input-background-color;
152	color: $input-foreground-color;
153	border-radius: 4px;
154	padding: 4px;
155
156	&::disabled {
157		color: $disabled-color;
158	}
159}
160
161MainWindow {
162	background-color: $sidebar-background-color;
163
164	MainToolBar {
165		background-color: $secondary-background-color;
166		border-style: none;
167		min-height: 42px;
168
169		&::separator {
170			background-color: $secondary-background-color;
171		}
172
173		QSlider {
174			selection-background-color: $theme-color;
175
176			&::handle {
177				background-color: $slider-handle-color;
178				width: 12px;
179				height: 12px;
180				border-radius: 6px;
181			}
182		}
183
184		QToolButton {
185			border: 1px solid transparent;
186			padding: 2px;
187
188			&::hover {
189				background-color: $menu-hover-background-color;
190				border-radius: 4px;
191			}
192
193			&::checked {
194				background-color: $secondary-background-color;
195				border-bottom-color: $theme-color;
196				border-radius: 0px;
197			}
198		}
199	}
200}
201
202LeftSidePanel {
203	LibraryList, PlaylistList {
204		color: $sidebar-foreground-color;
205		background-color: $sidebar-background-color;
206		@include selection-foreground($sidebar-foreground-color);
207
208		QScrollBar {
209			background-color: $sidebar-background-color;
210		}
211	}
212}
213
214SettingsDialog {
215	background-color: $background-color;
216
217	QListWidget {
218		color: $foreground-color;
219		background-color: $sidebar-background-color;
220		@include selection-foreground($foreground-color);
221
222		&::item {
223			min-height: 32px;
224		}
225	}
226}
227
228ArtistView {
229	QToolButton {
230		&, &::menu-button {
231			@include button-style();
232		}
233	}
234}
235
236WhatsNewDialog {
237	background-color: $sidebar-background-color;
238}