a Spicetify theme which features a distinct top bar, quick-to-edit CSS variables, and color schemes from Windows visual styles by KDr3w
-
Based on Matte by KDr3w and their other themes
-
Created by darkthemer
-
Check the very top of
user.cssfor quick configs- If you use the Marketplace, go to
Marketplace > Snippets > + Add CSSand then paste the quick configs found inuser.css. Edit these as you wish.
- If you use the Marketplace, go to
/* ================================
USER-EDITABLE VARIABLES
================================ */
:root {
/* top bar vars */
--top-bar-padding-top: 45px;
--top-bar-padding-right: 20px;
--top-bar-padding-bottom: 5px;
--top-bar-padding-left: 20px;
--tab-border-radius: 6px;
--top-bar-border-width: 2px;
/* sidebar vars */
--sidebar-button-border-radius: 4px;
--sidebar-border-width: 2px;
/* player vars */
--player-height: 90px;
--player-padding: 0 20px;
--player-border-width: 2px;
/* scrollbar vars */
--scrollbar-border-radius: 4px;
--scrollbar-width: 6px;
--scrollbar-width-hover: 6px;
}-
For Windows users, here's how to make the window controls' background match with the topbar background
-
Enable CEF/Spotify Tweaks in Windhawk (recommended)
-
Put this snippet into your
user.css(or through the Marketplace's custom CSS feature) (alternative)
-
/* transparent window controls background */
.spotify__container--is-desktop:not(.fullscreen) body::after {
content: "";
position: absolute;
right: 0;
z-index: 999;
backdrop-filter: brightness(2.12);
/* page zoom [ctrl][+] or [ctrl][-]
edit width and height accordingly
*/
width: 135px;
height: 48px;
}
