Skip to content

Spotify Light [BROKEN] by astarris

Mirrored from https://raw.githubusercontent.com/Gravitonic/userstyles/main/spotifylight.user.styl

Screenshot of Spotify Light [BROKEN]

Details

Authorastarris

LicenseMIT

Categoryspotify

Created

Updated

Size33 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Light theme for Spotify web player.

Spotify changed a bunch of its CSS and this style is currently out of commission. I'll probably still fix it up when I find the time, but it currently does not quite work.

Notes

This is a work in progress -- big time. There are probably pages that I haven't gotten to styling at all because I personally don't use them much, and I also haven't gotten around to working on browser compatibility.

Please also note that the light theme activation is based on a prefers-color-scheme media query.

Known issues:

  • If you're using Stylus on a webkit browser (if that exists?) some styles may be missing the needed prefixes
  • If you're using Firefox, you will need to enable the backdrop-filter CSS property in about:config for the style to work properly
  • Podcast pages are a bit of a mess currently

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Spotify Light Theme
@namespace      https://github.com/gravitonic
@version        0.10.1
@description    Light theme for the Spotify web player
@author         Dylan Yang

@preprocessor stylus

@var	color	mainText	"Main Text Color"	#191414
@var	color	lightText	"Light Text Color"	#535353
@var	color	lightGrey	"Light Gray Color"	#b3b3b3
@var	color	accentColor	"Accent Color"	#1db954
@var	color	lightColor	"Light Color"	#f3f2f2
@var	number	blurRadius	"Blur Radius"	[20, 0, 'px']
@var	checkbox	compactPlayer	"Horizontal Playing Bar"	1
==/UserStyle== */
// @var	checkbox	lightTheme	"Light Theme"	1
@-moz-document domain("open.spotify.com") {

	playerHeight=90px;

	if compactPlayer==1 {
		playerHeight=56px;

		.player-controls {
			flex-direction: row;
		}

		.player-controls__buttons {
			margin: 0 12px 0 0;
		}

		.now-playing-bar,
		.a2d114f8465b4517d0dcdf068d15e9cd-scss {
			height: auto;
			padding-left: 0;
		}
		
		[dir=ltr] .b63c05e4f277a01813677f1aa11b8aa3-scss {
			webkit-transform: translateX(-58px);
    transform: translateX(-58px);
		}

		.now-playing {
			transition: .5s ease-in-out;
		}

		.now-playing.now-playing--cover-expanded {
			padding-left: 16px;
			transition: .5s ease-in-out;
		}

		.now-playing-bar__left,
		.now-playing-bar__right {
			width: 25%;
		}
	}

	box-shadow() {
		box-shadow: 0 0 10px 0 transparentify(mainText, #fff, 0.1);
		transition: 0.3s ease-in-out;

		&:hover {
			box-shadow: 0 5px 10px 2px transparentify(mainText, #fff, 0.15);
			transition: 0.3s ease-in-out;
		}
	}

	@media (prefers-color-scheme: light) {
		body,
		button,
		input {
			color: lightText;
		}

		::-webkit-scrollbar-thumb {
			background-color: hsla(0, 0%, 0%, .3);
		}
		.main-view-container__scroll-node::-webkit-scrollbar-track-piece {
			margin-bottom: playerHeight;
		}

		.Root__now-playing-bar {
			grid-area: none;
			bottom: 0;
			position: absolute;
			background-color: transparent;
		}

		/* BACKGROUND */
		.main-view-container__scroll-node-child {
			padding-bottom: playerHeight + 32px;
		}
		html {
			background-color: white;
		}
		.b1b53e70887a91051a9d7dc85160fc6b-scss {
			background-color: white;
		}

		/* GENERAL */
		a {
			color: mainText;
		}

		/*
		[data-context-menu-open=true] a,
		a:focus,
		a:hover,
		a[data-context-menu-open=true] {
			text-decoration: none;
		}
		*/
		.inputBox-input {
			color: lightText;
		}
		.inputBox-label {
			color: lightText;
		}
		.dialog {
			backdrop-filter: blur(blurRadius);
			background-color: rgba(255, 255, 255, .8);
		}
		/* dialog x mark */
		.c74a35c3aba27d72ee478f390f5d8c16-scss svg path {
			fill: lightText;
		}
		._7c0399398b8b07b1b1fa6764a3ed59b1-scss {
			background: none;
		}
		.inputBox {
			background-color: white;
			border-radius: 8px;
		}

		.react-contextmenu {
			background-color: white;
		}
		.react-contextmenu-item.active,
		.react-contextmenu-item:hover {
			filter: brightness(90%);
		}

		._5991c352036dcc651a7bec853fd570a8-scss {
			color: mainText;
		}

		/* Headings for items not found e.g. no podcasts */
		._43fc5cbf15304cf223134ca70b6692f1-scss {
			color: mainText;
		}

		/* BUTTONS/ICONs */
		.a8cc695b476965309a30d01880d6cb01-scss {
			color: rgba(mainText, 0.7) !important;
		}

		/* TRACKLIST */
		._235729a60d5e265806e8509d8633b779-scss {
			background-color: white;
		}

		/* gradient from playlist header color to black */
		._59ed5f1313c7c4b211995d2b6463683f-scss {
			display: none;
		}

		/* song names */
		.da0bc4060bb1bdb4abb8e402916af32e-scss {
			color: mainText;
		}

		/* artist names, album names, date added, song length */
		._966e29b71d2654743538480947a479b3-scss a,
		.c6287512c50a737d01bd9db32b301fab-scss a,
		[data-testid="tracklist-row"] .f3fc214b257ae2f1d43d4c594a94497f-scss[style] {
			color: lightText !important;
		}

		/* play icon on hover */
		._38168f0d5f20e658506cd3e6204c1f9a-scss {
			color: mainText;
		}

		/* tracklist row hover */
		.e8ea6a219247d88aa936a012f6227b0d-scss:focus-within,
		.e8ea6a219247d88aa936a012f6227b0d-scss:hover {
			background-color: rgba(mainText, 0.05);
		}
		/* tracklist row hover after focused */
		.e8ea6a219247d88aa936a012f6227b0d-scss.bcc38527b11ab105d496846b4ad11ef4-scss,
		.e8ea6a219247d88aa936a012f6227b0d-scss.bcc38527b11ab105d496846b4ad11ef4-scss:hover {
			background-color: rgba(mainText, 0.1);
		}

		/* ellipsis icons on tracklist row hover */
		.e8ea6a219247d88aa936a012f6227b0d-scss:focus-within:not(.a735c1fd070add4b8837ff382ba2f6df-scss) ._50a94aaa6bd60a02583729be7f0e4f93-scss,
		.e8ea6a219247d88aa936a012f6227b0d-scss:hover:not(.a735c1fd070add4b8837ff382ba2f6df-scss) ._50a94aaa6bd60a02583729be7f0e4f93-scss {
			color: lightText;
		}

		/* ellipsis icon in tracklist row when menu opened */
		._50a94aaa6bd60a02583729be7f0e4f93-scss[data-context-menu-open=true] {
			color: lightText;
		}

		/* play icon on tracklist row focus */
		.e8ea6a219247d88aa936a012f6227b0d-scss.bcc38527b11ab105d496846b4ad11ef4-scss ._6b1ff8eab07810e2b7845ffe28430e38-scss,
		.e8ea6a219247d88aa936a012f6227b0d-scss.bcc38527b11ab105d496846b4ad11ef4-scss:hover ._6b1ff8eab07810e2b7845ffe28430e38-scss {
			color: mainText;
		}

		/* tracklist play icon focused */
		.e8ea6a219247d88aa936a012f6227b0d-scss:focus-within:not(.a735c1fd070add4b8837ff382ba2f6df-scss) ._38168f0d5f20e658506cd3e6204c1f9a-scss,
		.e8ea6a219247d88aa936a012f6227b0d-scss:hover:not(.a735c1fd070add4b8837ff382ba2f6df-scss) ._38168f0d5f20e658506cd3e6204c1f9a-scss {
			outline: none;
		}

		/* track number of plays popularity -- e.g. for top traacks on artiest page */
		.e8ea6a219247d88aa936a012f6227b0d-scss:hover:not(.a735c1fd070add4b8837ff382ba2f6df-scss) .c6287512c50a737d01bd9db32b301fab-scss,
		.e8ea6a219247d88aa936a012f6227b0d-scss:hover:not(.a735c1fd070add4b8837ff382ba2f6df-scss) .c6287512c50a737d01bd9db32b301fab-scss a {
			color: mainText;
		}

		/* track number of plays popularity on tracklist row focus */
		.e8ea6a219247d88aa936a012f6227b0d-scss.bcc38527b11ab105d496846b4ad11ef4-scss .c6287512c50a737d01bd9db32b301fab-scss,
		.e8ea6a219247d88aa936a012f6227b0d-scss.bcc38527b11ab105d496846b4ad11ef4-scss:hover .c6287512c50a737d01bd9db32b301fab-scss {
			color: mainText;
		}

		/* tracklist headers sticky */
		._83d9fef4ae69148dc1fc9b8323f8528b-scss._2dc8cce76d72af90f5e00e781db42541-scss {
			background-color: lightColor;
			border: none;
		}

		/* Ellipsis */
		.a319647e0b4638c35cbe1cc56bbe8710-scss {
			color: mainText;
		}
		.a319647e0b4638c35cbe1cc56bbe8710-scss:hover {
			color: lightText;
		}

		/* Also ellipsis apparently */
		._605821ce181f6de6632eabd6a46377fb-scss {
			color: lightText;
		}
		/* ellipsis next to follow, on hover */
		._605821ce181f6de6632eabd6a46377fb-scss:active,
		._605821ce181f6de6632eabd6a46377fb-scss:hover {
			color: mainText;
		}

		/* Find more button at bottom of playlist */
		._1de06189bc33bb25805c19bdbc99664e-scss {
			color: mainText;
		}

		/* refresh playlist suggestions */
		.e6ed3359ee250e2ecc13253d4db86076-scss {
			color: mainText;
		}

		/* title in top bar on scroll */
		._5acabdea2ee35e177c1df2bfde71d869-scss {
			color: mainText;
		}

		/* ROUNDED RECTANGLE PANELS */
		/* panel background */
		._3802c04052af0bb5d03956299250789e-scss {
			background: white;
			box-shadow();
		}
		._3802c04052af0bb5d03956299250789e-scss:hover,
		._3802c04052af0bb5d03956299250789e-scss[data-context-menu-open=true] {
			background: darken(white, 4%);
		}

		._6424f268be3505ebab663700d60ebaa6-scss {
			overflow: visible;
		}

		/* background behind images */
		._2ce7a4a879bab3a4f4543c870c6d79fd-scss {
			background: transparent;
			border-radius: 4px;
		}

		/* same but for podcasts */
		._3c714093dde27a95828cd3b036c6bd47-scss {
			background: transparent;
			border-radius: 12px;
		}
		
		.ea5ea5226ed6fbf2cc63599fbda43580-scss {
			border-radius: 50%;
		}

		/* Circle  */
		._11f5fc88e3dec7bfec55f7f49d581d78-scss {
			background-color: accentColor;
		}

		._80c2c1f0f44b53866fc1b5e9fa66b949-scss,
		._231fdfa582dcc286559e37228e472dfd-scss {
			color: mainText !important;
		}
		._244a0ac55904a7c958f4f21be2f7a673-scss {
			overflow: visible !important;
		}

		._150ae7fd9abd9aa13b6fa9c8be2b76a6-scss {
			color: mainText !important;
		}

		._1aca8ea6d314e58957d99cc0df0d2ca1-scss {
			background-image: linear-gradient(rgba(255, 255, 255, .95), white 50%) !important;
		}

		/* HOME */
		html[dir=ltr] .a30bc3a2554a1ee9d60cc33f550927fe-scss,
		.bec438c032702fec6886039b3385e589-scss {
			color: lightText;
		}
		._79db9bc9b8d7d51dc51191bf91a55c64-scss {
			background: white;
		}
		._7ae3a7b5ef70bce1740ff486c4467d56-scss {
			background-image: linear-gradient(rgba(255, 255, 255, .8), white);
		}

		/* suggestion subtitles */
		._3cfbde1fd9fecaaa77935664eeb6e346-scss {
			color: lightText !important;
		}

		/* play buttons on hover over suggestions */
		._1991208eaca7e4ed0cff8a9919cfd509-scss,
		._3a2318b538bc2aae78113023036a879a-scss {
			box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
		}

		/* shortcuts items */
		._28be3af50433a1164b3a62a898dce43e-scss {
			background-color: rgba(white, 0.4);
			box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
			transition-property: all;
		}

		._28be3af50433a1164b3a62a898dce43e-scss:focus-within,
		._28be3af50433a1164b3a62a898dce43e-scss:hover,
		._28be3af50433a1164b3a62a898dce43e-scss[data-context-menu-open=true] {
			background-color: rgba(white, 0.01);
			box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
		}

		/* shortcuts grid template */
		._560fb0a89f4ec24665eb945cfe2c97b0-scss {
			overflow: visible;
		}

		/* shortcuts album/playlist covers */
		._28be3af50433a1164b3a62a898dce43e-scss ._9ac38655c14bc3ee70c0c38bce1c9e...

Reviews

No reviews yet.