Spotify Discord
Combine Discord and Spotify into one
448
Live preview
Full Discord interface with this theme applied — powered by ThemePreview.
Screenshot
1
/**2
* @name Spotify Discord3
* @version 2.0.04
* @description Combine Discord and Spotify into one5
* @author CapnKitten6
*7
* @website http://github.com/CapnKitten8
* @source https://github.com/CapnKitten/BetterDiscord/blob/master/Themes/Spotify-Discord/css/source.css9
* @donate https://paypal.me/capnkitten10
* @invite jzJkA6Z11
*/12
13
@import url(https://capnkitten.github.io/BetterDiscord/Themes/Spotify-Discord/css/source.css);14
15
:root {16
/* APP BACKGROUND COLORS */17
--app-background: hsl(0,0%,0%);18
--app-foreground: hsl(0,0%,7%);19
20
/* APP CARD SETTINGS */21
--app-card-radius: 8px;22
--app-card-margin: 8px;23
--app-card-top-margin: 4px;24
--app-card-border-color: hsl(0,0%,14%);25
26
/* APP BAR SETTINGS (BLACK BAR AT THE BOTTOM) */27
--app-bar-size: 80px;28
29
/* HEADER BAR SETTINGS */30
--header-bar-height: 56px;31
--header-bar-color: hsl(0,0%,13%);32
33
/* ACCENT HSL AND TEXT COLOR SETTINGS */34
--accent-hue: 141;35
--accent-saturation: 72.9%;36
--accent-lightness: 42%;37
--accent-text-color: hsl(0,0%,6%);38
39
/* ALERT HSL AND TEXT COLOR SETTINGS*/40
--alert-hue: 0;41
--alert-saturation: 85%;42
--alert-lightness: 61%;43
--alert-text-color: hsl(0,0%,0%);44
45
/* LIST & MENU ITEM SETTINGS */46
--background-tinted-hover: hsla(0,0%,100%,0.07);47
--background-tinted-active: hsla(0,0%,100%,0.11);48
--background-tinted-highlight: hsla(0,0%,100%,0.17);49
--background-tinted-dark: hsla(0,0%,0%,0.23);50
51
--menu-text-color: hsl(0,0%,85%);52
--menu-item-radius: 6px;53
54
/* CARD SETTINGS - DIFFERENT FROM APP CARD SETTINGS */55
--card-color: hsl(0,0%,10%);56
--card-color-hover: hsl(0,0%,14%);57
--card-color-active: hsl(0,0%,22%);58
--card-radius: 6px;59
--card-border-color: hsl(0,0%,19%);60
61
/* BUTTON SETTINGS */62
--button-height: 36px;63
--button-padding: 0 18px;64
65
/* POPOUT AND MODAL SETTINGS */66
--popout-color: hsl(0,0%,16%);67
--popout-color-alt: hsl(0,0%,11%);68
--popout-radius: 6px;69
--popout-radius-big: 10px;70
71
/* INPUT SETTINGS */72
--input-height: 36px;73
--input-padding: 0 12px;74
--input-color: hsla(0,0%,100%,0.09);75
--input-radius: 4px;76
--input-border-color: hsl(0,0%,33%);77
--input-text-color: hsl(0,0%,96%);78
--input-placeholder-color: hsl(0,0%,71%);79
80
/* MAIN CHAT BOX SETTINGS */81
--main-textarea-min-height: 48px;82
--main-textarea-color: hsl(0,0%,14%);83
--main-textarea-border-color: hsl(0,0%,20%);84
--main-textarea-text-color: hsl(0,0%,60%);85
--main-textarea-placeholder-color: hsl(0,0%,54%);86
--main-textarea-typing-color: hsla(0,0%,7%,0.9);87
88
/* MESSAGE SETTINGS */89
--message-color-hover: hsl(0,0%,9%);90
91
/* SLIDER SETTINGS */92
--slider-color: hsl(0,0%,70%);93
--slider-background: hsl(0,0%,26%);94
95
/* SCROLLBAR SETTINGS */96
--scrollbar-width: 12px;97
--scrollbar-color: hsl(0,0%,35%);98
--scrollbar-hover-color: hsl(0,0%,49%);99
--scrollbar-active-color: hsl(0,0%,58%);100
}101