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]
Homepage Write a review Install Get Stylus

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.