☰

Spotify lyric background override

9/11/2024, 4:57:30 PM

目前為 2024-09-12 提交的版本，檢視 最新版本。

// ==UserScript==
// @name        Spotify lyric background override
// @namespace   Violentmonkey Scripts
// @match       https://open.spotify.com/*
// @grant       none
// @version     1.5
// @author      M Ogdahl
// @license     MIT
// @run-at      document-body
// @description 9/11/2024, 4:57:30 PM
// ==/UserScript==

const delay = ms => new Promise(res => setTimeout(res, ms));
//active: Green, inactive: base00, passed: green with opacity of .5, bg: base3
const styleString = "--lyrics-color-active: rgb(133,153,0); --lyrics-color-inactive: rgb(101,123,131); --lyrics-color-passed: rgba(133,153,0,0.5); --lyrics-color-background: rgb(0,43,54); --lyrics-color-messaging: rgb(0, 0, 0);";
//active: Green, inactive: base0, passed: green with opacity of .5, bg: base03
const lightStyleString = "--lyrics-color-active: rgb(133,153,0); --lyrics-color-inactive: rgb(131, 148, 150); --lyrics-color-passed: rgba(133,153,0,0.5); --lyrics-color-background: rgb(253, 246, 227); --lyrics-color-messaging: rgb(0, 0, 0);";
const styleStrings = [styleString, lightStyleString];
const darkButton = document.createElement("button");
darkButton.textContent = 'LM Dark Mode';
darkButton.style.color = "rgb(29, 185, 84)";
darkButton.style.backgroundColor = "rgb(0,0,0)";
darkButton.style.border = "none";
darkButton.style.fontFamily = "var(--encore-body-font-stack)";
darkButton.style.fontSize = "var(--encore-text-size-smaller)";
darkButton.fontWeight = "400";
darkButton.style.marginRight = "16px";

var modeSelect = 0;
var onSelect = 1;

const onButton = document.createElement("button");
onButton.textContent = "Lyric Mod";
onButton.style.color = "rgb(29,185,84)";
onButton.style.backgroundColor = "rgb(0,0,0)";
onButton.style.border = "none";
onButton.style.fontFamily = "var(--encore-body-font-stack)"
onButton.style.fontSize = "var(--encore-text-size-smaller)";
onButton.fontWeight = "400";
onButton.style.marginRight = "16px";

darkButton.addEventListener('click', () => { //handles dark mode button toggle
  if (modeSelect == 0) {
    modeSelect = 1;
    darkButton.style.color = "rgba(255,255,255,0.7)";
  } else {
    modeSelect = 0;
    darkButton.style.color = "rgb(29, 185, 84)";
  }
});

onButton.addEventListener('click', () => { //handles on button toggle
  if (onSelect == 0) {
    onSelect = 1;
    onButton.style.color = "rgb(29, 185, 84)";
  } else {
    onSelect = 0;
    onButton.style.color = "rgba(255,255,255,0.7)";
  }
});
var defaultColor = "";

const MyFunction = async () => {
    'use strict';
    var buttonDiv = document.getElementsByClassName("mwpJrmCgLlVkJVtWjlI1");
    while (buttonDiv[0] == undefined) {
      await delay(100);
      buttonDiv = document.getElementsByClassName("mwpJrmCgLlVkJVtWjlI1"); // waits for button div to load
    }
    buttonDiv[0].prepend(darkButton); //adds buttons to button div
    buttonDiv[0].prepend(onButton);
    while (true) {
      await delay(100);
      let possibleDiv = document.getElementsByClassName("FUYNhisXTCmbzt9IDxnT");
      if (possibleDiv[0] != undefined) { //if the lyric div is on screen
          if ((possibleDiv[0].style.cssText != styleStrings[1]) && (possibleDiv[0].style.cssText != styleStrings[0]) && (onSelect == 1)) { // if on button pressed and lyric color isn't light or dark
            defaultColor = possibleDiv[0].style.cssText; //set default color, then change to custom
            possibleDiv[0].style.cssText = styleStrings[modeSelect];
          } else if ((onSelect == 0) && (possibleDiv[0].style.cssText != styleStrings[1]) && (possibleDiv[0].style.cssText != styleStrings[0]))  { //Resets custom color if mod is off and color isn't light or dark
              defaultColor = possibleDiv[0].style.cssText;
          } else if (onSelect==0) { // sets color to custom if mod is off
            possibleDiv[0].style.cssText = defaultColor; //set color back to default
          }  else if (possibleDiv[0].style.cssText != styleStrings[modeSelect] && onSelect == 1) { // if lyric mod is on but lyrics are the wrong color (dark v light)
              possibleDiv[0].style.cssText = styleStrings[modeSelect]; //change lyric color to current custom color
          }

          //console.log(possibleDiv[0].style.cssText);
        }
        //console.log(possibleDiv[0].style.cssText);

    }
};

MyFunction()