☰

Apple Music Dark Reader Fix for LibreWolf

Fixes the display of Apple Music page elements in LibreWolf when Dark Reader is installed. LibreWolf interferes with Dark Reader on some web pages elements due to the Resist Fingerprinting measures that it implements. This userscript itself will not undermine Resist Fingerprinting measures because it: does not access or expose sensitive browser APIs, only modifies CSS properties and shadow DOM elements for styling purposes, and avoids interacting with device-specific or identifying information.

  1. // ==UserScript==
  2. // @name         Apple Music Dark Reader Fix for LibreWolf
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.4
  5. // @icon         https://ptpimg.me/3wphme.png
  6. // @description  Fixes the display of Apple Music page elements in LibreWolf when Dark Reader is installed. LibreWolf interferes with Dark Reader on some web pages elements due to the Resist Fingerprinting measures that it implements. This userscript itself will not undermine Resist Fingerprinting measures because it: does not access or expose sensitive browser APIs, only modifies CSS properties and shadow DOM elements for styling purposes, and avoids interacting with device-specific or identifying information.
  7. // @match        https://music.apple.com/*
  8. // @grant        GM_addStyle
  9. // @license      MIT
  10. // @run-at       document-idle
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Apply general styles with GM_addStyle
  17.     GM_addStyle(`
  18.       :root {
  19. 	    --systemPrimary: hsla(0,0%,100%,.92);
  20. 	    --systemPrimary-vibrant: #f5f5f7;
  21. 	    --systemPrimary-onLight: rgba(0,0,0,.88);
  22. 	    --systemPrimary-onDark: hsla(0,0%,100%,.92);
  23. 	    --systemSecondary: hsla(0,0%,100%,.64);
  24. 	    --systemSecondary-vibrant: #a1a1a6;
  25. 	    --systemSecondary-onLight: rgba(0,0,0,.56);
  26. 	    --systemSecondary-onDark: hsla(0,0%,100%,.64);
  27. 	    --systemTertiary: hsla(0,0%,100%,.4);
  28. 	    --systemTertiary-vibrant: #6e6e73;
  29. 	    --systemTertiary-onLight: rgba(0,0,0,.48);
  30. 	    --systemTertiary-onDark: hsla(0,0%,100%,.4);
  31. 	    --keyColor: #ff364c;
  32. 	    --keyColor-rgb: 255,54,76;
  33. 	    --keyColor-rollover: #ff8a9c;
  34. 	    --keyColor-rollover-rgb: 255,138,156;
  35. 	    --keyColor-pressed: #ff7183;
  36. 	    --keyColor-pressed-rgb: 255,113,131;
  37. 	    --keyColor-deepPressed: #ff8a9c;
  38. 	    --keyColor-deepPressed-rgb: 255,138,156;
  39. 	    --keyColor-disabled: rgba(255,54,76,.35);
  40. 	    --musicKeyColor: #fa586a;
  41. 	    --musicKeyColor-rollover: #ff8a9c;
  42. 	    --musicKeyColor-pressed: #ff7183;
  43. 	    --musicKeyColor-deepPressed: #ff8a9c;
  44. 	    --musicKeyColor-disabled: rgba(255,54,76,.35);
  45. 	    --keyColorBG: #d60017;
  46. 	    --selectionColor: #a60012;
  47.         --darkreader-bg--keyColorBG: #df1b30;
  48.       }
  49.       amp-chrome-player::before {
  50.         --playerGradientTop: #fff0;
  51.         --playerGradientBottom: #fff0;
  52.         background-color: #2d2d2de0 !important
  53.       }
  54.       amp-chrome-player {
  55.         --systemSecondary: #ffffffa3;
  56.         --skip-control-color-hover: white;
  57.         --chromeVolumeIcon: #fff6;
  58.         --chromeVolumeTrack: #ffffff26;
  59.         --chromeVolumeElapsed: #fff9;
  60.       }
  61.       amp-lcd {
  62.         --lcd-artworkHoverBGColor: #121212e8;
  63.         --playerMissingArtworkBg: #121212;
  64.         --playerLCDBGFill: #4d4d4d;
  65.         --systemSecondary: #ffffffa3;
  66.       }
  67.     `);
  68.  
  69.     function applyStylesInShadowRoot() {
  70.         const chromePlayer = document.querySelector('amp-chrome-player');
  71.         if (!chromePlayer || !chromePlayer.shadowRoot) return;
  72.  
  73.         const playbackControls = chromePlayer.shadowRoot.querySelector('apple-music-playback-controls');
  74.         if (!playbackControls || !playbackControls.shadowRoot) return;
  75.  
  76.         // Add style to modify shadow DOM elements
  77.         const style = document.createElement('style');
  78.         style.textContent = `
  79.           :host {
  80.             --systemSecondary: #ffffffa3 !important;
  81.             --systemPrimary-vibrant: white !important;
  82.           }
  83.         `;
  84.         playbackControls.shadowRoot.appendChild(style);
  85.     }
  86.  
  87.     // Monitor for changes to ensure styles are always applied
  88.     const observer = new MutationObserver(() => {
  89.         applyStylesInShadowRoot();
  90.     });
  91.  
  92.     // Observe the player container for dynamic changes
  93.     const playerContainer = document.querySelector('amp-chrome-player');
  94.     if (playerContainer) {
  95.         observer.observe(playerContainer, { childList: true, subtree: true });
  96.     }
  97.  
  98.     // Initial call to apply styles after a delay
  99.     setTimeout(applyStylesInShadowRoot, 400);
  100. })();