Download

SpotiCord

By Sappy Version AutoUpdating Updated 07/08/2024 73.7K downloads

Light-weight Spotify theme for Discord

green dark flat customizable

Live preview

Full Discord interface with this theme applied — powered by ThemePreview.

Screenshot

SpotiCord screenshot
SpotiCord.theme.css
GitHub

Open source

https://raw.githubusercontent.com/Slddev/SpotiCord/661ae15f4b835664291f4b9764886d06ea8f67a6/SpotiCord.theme.css
1/**
2 * @name SpotiCord
3 * @author Sappy#8123
4 * @authorId 741262207391629343
5 * @version AutoUpdating
6 * @description Light-weight Spotify theme for Discord
7 * @source https://github.com/Slddev/SpotiCord
8 * @website https://sappy.eu.org
9 * @donate https://buymeacoffee.com/slddev
10*/
11
12@import url("https://slddev.github.io/SpotiCord/src/boot.css");
13/*@import url("https://crearts-community.github.io/Friends-Grid/clients/betterdiscord.css");*/
14@import url("https://discordstyles.github.io/RadialStatus/dist/RadialStatus.css");
15
16/*SpotiCord Vars*/
17:root {
18 --sc-gradient-color: #1ed760;
19}
20
21/*Friends-Grid*/
22:root {
23 --FA-version: ";v1.0.10 (SpotiCord Version)";;
24
25 --FG-row: 1fr 1fr 1fr;
26
27 --FG-search-radius: 8px;
28
29 --FG-cards-radius: 8px;
30 --FG-cards-height: 180px;
31 --FG-cards-banner-background: var(--brand-experiment);
32 --FG-cards-margin-bottom: 26px;
33 --FG-cards-banner-height: 20px;
34 --FG-cards-border-width: 1px;
35
36 --FG-avatar-margin-top: 46px;
37 --FG-avatar-margin-left: 20px;
38 --FG-text-margin-left: 20px;
39
40 --FG-cards-banner-opacity-normal: 1;
41 --FG-cards-banner-opacity-hover: 1;
42 --FG-cards-banner-opacity-active: 1;
43
44 --FG-cards-avatar-opacity-normal: 1;
45 --FG-cards-avatar-opacity-hover: 1;
46 --FG-cards-avatar-opacity-active: 1;
47
48 --FG-cards-username-opacity-normal: 1;
49 --FG-cards-username-opacity-hover: 1;
50 --FG-cards-username-opacity-active: 1;
51
52 --FG-cards-discriminator-opacity-normal: 1;
53 --FG-cards-discriminator-opacity-hover: 1;
54 --FG-cards-discriminator-opacity-active: 1;
55
56 --FG-cards-status-opacity-normal: 1;
57 --FG-cards-status-opacity-hover: 1;
58 --FG-cards-status-opacity-active: 1;
59
60 --FG-cards-button-opacity-normal: 0;
61 --FG-cards-button-opacity-hover: 1;
62 --FG-cards-button-opacity-active: 0;
63
64 --FG-mutal-guilds-normal: 0;
65 --FG-mutal-guilds-hover: 1;
66 --FG-mutal-guilds-active: 1;
67
68 --FG-avatar-shape: 50%;
69
70 --FG-transition: all 0.4s ease;
71
72 --user-accent-color: var(--FG-cards-banner-background);
73}
74
75.theme-dark {
76 --FG-search-background: var(--background-tertiary);
77
78 --FG-cards-background-normal: var(--background-secondary);
79 --FG-cards-background-hover: var(--activity-card-background);
80
81 --FG-cards-background-active: var(--activity-card-background);
82
83 --FG-cards-border-color-normal: var(--background-modifier-accent);
84 --FG-cards-border-color-hover: var(--background-modifier-accent);
85
86 --FG-cards-username-normal: var(--header-primary);
87 --FG-cards-username-hover: var(--header-primary);
88 --FG-cards-discriminator-normal: var(--header-secondary);
89 --FG-cards-discriminator-hover: var(--header-secondary);
90 --FG-cards-status-normal: var(--header-secondary);
91 --FG-cards-status-hover: var(--header-secondary);
92
93 --FG-cards-button-icon-normal: var(--interactive-active);
94 --FG-cards-button-icon-hover: var(--activity-card-background);
95 --FG-cards-button-background-normal: rgba(0, 0, 0, 0.3);
96 --FG-cards-button-background-hover: rgba(0, 0, 0, 0.6);
97}
98
99.theme-light {
100 --FG-search-background: var(--background-tertiary);
101
102 --FG-cards-background-normal: var(--background-secondary);
103 --FG-cards-background-hover: var(--activity-card-background);
104
105 --FG-cards-background-active: var(--activity-card-background);
106
107 --FG-cards-border-color-normal: var(--background-modifier-accent);
108 --FG-cards-border-color-hover: var(--background-modifier-accent);
109
110 --FG-cards-username-normal: var(--header-primary);
111 --FG-cards-username-hover: var(--header-primary);
112 --FG-cards-discriminator-normal: var(--header-secondary);
113 --FG-cards-discriminator-hover: var(--header-secondary);
114 --FG-cards-status-normal: var(--header-secondary);
115 --FG-cards-status-hover: var(--header-secondary);
116
117 --FG-cards-button-icon-normal: var(--interactive-active);
118 --FG-cards-button-icon-hover: var(--activity-card-background);
119 --FG-cards-button-background-normal: rgba(255, 255, 255, 0.3);
120 --FG-cards-button-background-hover: rgba(255, 255, 255, 0.6);
121}
122
123/*RadialStatus*/
124:root {
125 --rs-small-spacing: 2px; /* Gap between avatar and status for members list/dms | MUST end in px */
126 --rs-medium-spacing: 3px; /* Gap between avatar and status for User popout | MUST end in px */
127 --rs-large-spacing: 4px; /* Gap between avatar and status for User profiles | MUST end in px */
128
129 --rs-small-width: 2px; /* Thickness of status border for members list/dms | MUST end in px */
130 --rs-medium-width: 3px; /* Thickness of status border for User popout | MUST end in px */
131 --rs-large-width: 4px; /* Thickness of status border for User profile | MUST end in px */
132
133 --rs-avatar-shape: 50%; /* 50% for round - 0% for square */
134
135 --rs-online-color: #43b581; /* Colour for online status */
136 --rs-idle-color: #faa61a; /* Colour for idle status */
137 --rs-dnd-color: #f04747; /* Colour for dnd status */
138 --rs-offline-color: #636b75; /* Colour for offline status */
139 --rs-streaming-color: #643da7; /* Colour for streaming status */
140 --rs-invisible-color: #747f8d; /* Colour for invisible status - Note: this will only show for your own invisibility */
141 --rs-phone-color: var(
142 --rs-online-color
143 ); /* Colour of the ring and phone icon when a user is on their phone | */
144
145 --rs-phone-visible: none; /* Visibility of the phone icon next to a users avatar. | block = visible | none = hidden */
146}
147

Full theme source (SpotiCord.theme.css). Copy or download from GitHub.

Download theme

FiveCord for Windows

Free. One click. Windows.

Download