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}