Google Play Music Dark UI Theme

bookmarklet.html

<h1>Google Play Music Dark Theme Bookmarklet</h1>

Drag me into the bookmarks bar:<br>

<a href="javascript%3A%28function%28%29%7Bvar%20gist_id%3D%27aa550ff0292999236db1%27%3Bvar%20css%3D%5B%5D%3Bvar%20js%3D%5B%5D%3Bvar%20applyCSS%3Dfunction%28%29%7Bfor%28var%20x%20in%20css%29%7Bvar%20style%3Ddocument.createElement%28%27style%27%29%3Bstyle.innerHTML%3Dcss%5Bx%5D%3Bdocument.head.appendChild%28style%29%3B%7D%7D%3Bvar%20applyJS%3Dfunction%28%29%7Bfor%28var%20x%20in%20js%29%7Bvar%20script%3Ddocument.createElement%28%27script%27%29%3Bscript.innerHTML%3Djs%5Bx%5D%3Bdocument.body.appendChild%28script%29%3B%7D%7D%3Bvar%20xhr%3Dnew%20XMLHttpRequest%28%29%3Bxhr.open%28%27GET%27%2C%27https%3A//api.github.com/gists/%27+gist_id%2Ctrue%29%3Bxhr.onload%3Dfunction%28%29%7Bvar%20data%3DJSON.parse%28this.responseText%29%3Bfor%28var%20file%20in%20data.files%29%7Bif%28data.files%5Bfile%5D.language%3D%3D%27CSS%27%29%7Bcss.push%28data.files%5Bfile%5D.content%29%3B%7Dif%28data.files%5Bfile%5D.language%3D%3D%27JavaScript%27%29%7Bjs.push%28data.files%5Bfile%5D.content%29%3B%7D%7DapplyCSS%28%29%3BapplyJS%28%29%3B%7D%3Bxhr.onerror%3Dfunction%28%29%7Bconsole.log%28%27Failed%20to%20load%20Gist%3A%20%27+request.gist%29%3B%7D%3Bxhr.send%28%29%3B%7D%28%29%29%3B">Google Play Music Dark Theme</a>

googleplaymusic.user.js

// ==UserScript==
// @name         Google Play Music Dark Theme
// @version      0.9
// @description  Inverts the Google Play Music UI so that it has a dark UI instead of a white one.
// @match        https://play.google.com/music/listen*
// @copyright    2014 Benjamin Knight <[email protected]>
// @author       Benjamin Knight
// ==/UserScript==

(function () {
  var cssRewrites = 'html{-webkit-font-smoothing:antialiased}html,img,.overlay{-webkit-filter:invert(100%)}.screensaver .panning{background-color:white !important}';
  
  var style = document.createElement('style');
  style.innerHTML = cssRewrites;
  document.head.appendChild(style);
})();

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

// Make text more legible.
html {
  -webkit-font-smoothing: antialiased;
}

// Invert the UI so white -> black
html,
img,
.overlay {
  -webkit-filter: invert(100%);
}

// Reset some styles in the fullscreen album mode.
.screensaver .panning {
  background-color: white !important;
}

SassMeister-output.css

html{-webkit-font-smoothing:antialiased}html,img,.overlay{-webkit-filter:invert(100%)}.screensaver .panning{background-color:white !important}

SassMeister-rendered.html

<h1>Google Play Music Dark Theme Bookmarklet</h1>

Drag me into the bookmarks bar:<br>

<a href="javascript%3A%28function%28%29%7Bvar%20gist_id%3D%27aa550ff0292999236db1%27%3Bvar%20css%3D%5B%5D%3Bvar%20js%3D%5B%5D%3Bvar%20applyCSS%3Dfunction%28%29%7Bfor%28var%20x%20in%20css%29%7Bvar%20style%3Ddocument.createElement%28%27style%27%29%3Bstyle.innerHTML%3Dcss%5Bx%5D%3Bdocument.head.appendChild%28style%29%3B%7D%7D%3Bvar%20applyJS%3Dfunction%28%29%7Bfor%28var%20x%20in%20js%29%7Bvar%20script%3Ddocument.createElement%28%27script%27%29%3Bscript.innerHTML%3Djs%5Bx%5D%3Bdocument.body.appendChild%28script%29%3B%7D%7D%3Bvar%20xhr%3Dnew%20XMLHttpRequest%28%29%3Bxhr.open%28%27GET%27%2C%27https%3A//api.github.com/gists/%27+gist_id%2Ctrue%29%3Bxhr.onload%3Dfunction%28%29%7Bvar%20data%3DJSON.parse%28this.responseText%29%3Bfor%28var%20file%20in%20data.files%29%7Bif%28data.files%5Bfile%5D.language%3D%3D%27CSS%27%29%7Bcss.push%28data.files%5Bfile%5D.content%29%3B%7Dif%28data.files%5Bfile%5D.language%3D%3D%27JavaScript%27%29%7Bjs.push%28data.files%5Bfile%5D.content%29%3B%7D%7DapplyCSS%28%29%3BapplyJS%28%29%3B%7D%3Bxhr.onerror%3Dfunction%28%29%7Bconsole.log%28%27Failed%20to%20load%20Gist%3A%20%27+request.gist%29%3B%7D%3Bxhr.send%28%29%3B%7D%28%29%29%3B">Google Play Music Dark Theme</a>