├── README.md ├── Spotify-Discord.theme.css ├── assets └── preview.png └── manifest.json /README.md: -------------------------------------------------------------------------------- 1 | # Spotify Discord Theme - [![Paypal][paypal-logo]][paypal-url] [![GitHub][github-logo]][github-url] [![Discord][discord-logo]][discord-url] 2 | #### Combine Discord and Spotify into one 3 |
4 | 5 | Current version: v2.0.0 (18/10/2023) 6 | 7 | [BetterDiscord download](https://betterdiscord.app/theme/Spotify%20Discord) 8 |
9 | [View add-on themes](https://github.com/CapnKitten/BetterDiscord/tree/master/Themes/Spotify-Discord/css/addons) 10 |
11 | [View source files](https://github.com/CapnKitten/BetterDiscord/tree/master/Themes/Spotify-Discord) 12 | 13 | Vencord link 14 | ``` 15 | https://capnkitten.github.io/BetterDiscord/Themes/Spotify-Discord/css/source.css 16 | ``` 17 | 18 |
19 | 20 | This theme works best with the plugin called [SpotifyControls](https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/SpotifyControls) by DevilBro. To get it up and working, make sure your Spotify account is linked to your Discord account then download the plugin [here](https://github.com/mwittrien/BetterDiscordAddons/tree/master/Plugins/SpotifyControls) or from the plugin repo. 21 | 22 | ## Previews 23 | 24 | (Previews are subject to be out of date) 25 | 26 | #### Main chat area 27 | 28 | ![discord_201](https://github.com/CapnKitten/Spotify-Discord/assets/4013216/b182452c-785d-42b2-9115-361faace562e) 29 | 30 | #### User info popout 31 | 32 | ![discord_202](https://github.com/CapnKitten/Spotify-Discord/assets/4013216/c67b6d2d-71ea-47fd-a972-68ca620c5c08) 33 | 34 | #### User settings 35 | 36 | ![discord_203](https://github.com/CapnKitten/Spotify-Discord/assets/4013216/19c44b12-1bc7-45b8-b333-2fd7843999cd) 37 | 38 | ![discord_204](https://github.com/CapnKitten/Spotify-Discord/assets/4013216/99f6d683-6837-456b-9a1a-7fa5e9a17b1a) 39 | 40 | ## Custom server title bar colors 41 | To change the title bar color for specific servers, use the code template below and place it in your custom CSS and change the server name and HSL color code to your liking. 42 | ```css 43 | .container-1NXEtd[aria-label*="SERVER_NAME"] { 44 | --header-bar-color: hsl(212,70%,31%); 45 | } 46 | ``` 47 | 48 | [paypal-logo]: https://img.shields.io/static/v1?label=PayPal&message=Donate&style=flat&logo=paypal&color=blue 49 | [paypal-url]: https://paypal.me/capnkitten 50 | 51 | [github-logo]: https://img.shields.io/static/v1?label=GitHub&message=Sponsor&style=flat&logo=github&color=black 52 | [github-url]: https://github.com/sponsors/CapnKitten 53 | 54 | [discord-logo]: https://img.shields.io/static/v1?label=Discord&message=Server&style=flat&logo=discord&color=blue 55 | [discord-url]: https://discord.gg/jzJkA6Z 56 | -------------------------------------------------------------------------------- /Spotify-Discord.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Spotify Discord 3 | * @version 2.0.0 4 | * @description Combine Discord and Spotify into one 5 | * @author CapnKitten 6 | * 7 | * @website http://github.com/CapnKitten 8 | * @source https://github.com/CapnKitten/BetterDiscord/blob/master/Themes/Spotify-Discord/css/source.css 9 | * @donate https://paypal.me/capnkitten 10 | * @invite jzJkA6Z 11 | */ 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 | -------------------------------------------------------------------------------- /assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapnKitten/Spotify-Discord/0baa81cd28c4934b530557a795a54820b52e2366/assets/preview.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Spotify-Discord", 3 | "description": "Combine Discord and Spotify into one", 4 | "version": "1.4.2", 5 | "author": "CapnKitten", 6 | "theme": "Spotify-Discord.theme.css", 7 | "license": "MIT" 8 | } 9 | --------------------------------------------------------------------------------