// ==UserScript== // @name RYM Release Page Colorizer // @namespace http://tampermonkey.net/ // @version 1.1 // @description Change specific CSS variables and elements based on album cover colors on RateYourMusic // @author https://greasyfork.org/users/1320826-polachek // @match *://rateyourmusic.com/release/* // @grant none // @require https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js // @license MIT // @downloadURL https://update.greasyfork.icu/scripts/510218/RYM%20Release%20Page%20Colorizer.user.js // @updateURL https://update.greasyfork.icu/scripts/510218/RYM%20Release%20Page%20Colorizer.meta.js // ==/UserScript== (function() { 'use strict'; function addGlobalStyle(css) { const style = document.createElement('style'); style.type = 'text/css'; style.appendChild(document.createTextNode(css)); document.head.appendChild(style); } function adjustColor(rgb, percent) { const r = Math.min(255, Math.max(0, Math.floor(rgb[0] * (1 + percent)))); const g = Math.min(255, Math.max(0, Math.floor(rgb[1] * (1 + percent)))); const b = Math.min(255, Math.max(0, Math.floor(rgb[2] * (1 + percent)))); return [r, g, b]; } function getLuminance(rgb) { const a = rgb.map(function (v) { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }); return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; } function getContrastRatio(rgb1, rgb2) { const lum1 = getLuminance(rgb1); const lum2 = getLuminance(rgb2); return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05); } function adjustForContrast(bgColor, fontColor) { let ratio = getContrastRatio(bgColor, fontColor); let adjustment = 0.1; let maxIterations = 20; let iterations = 0; const bgLuminance = getLuminance(bgColor); const fontLuminance = getLuminance(fontColor); while (ratio < 4.5 && iterations < maxIterations) { fontColor = adjustColor(fontColor, (bgLuminance > fontLuminance) ? -adjustment : adjustment); ratio = getContrastRatio(bgColor, fontColor); iterations++; } return fontColor; } addGlobalStyle(` *, *::before, *::after { border: none !important; } `); window.addEventListener('load', function() { const albumCover = document.querySelector('div[class^="coverart_"] img'); if (albumCover) { albumCover.crossOrigin = "Anonymous"; albumCover.onload = function() { const colorThief = new ColorThief(); const palette = colorThief.getPalette(albumCover, 5); const dominantColor = palette[0]; const fontColor = palette[1]; const dominantColorRGB = `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`; const fontColorRGB = `rgb(${fontColor[0]}, ${fontColor[1]}, ${fontColor[2]})`; const darkerColor = adjustColor(dominantColor, -0.05); const darkerColorRGB = `rgb(${darkerColor[0]}, ${darkerColor[1]}, ${darkerColor[2]})`; const adjustedFontColor = adjustForContrast(dominantColor, fontColor); const adjustedFontColorRGB = `rgb(${adjustedFontColor[0]}, ${adjustedFontColor[1]}, ${adjustedFontColor[2]})`; addGlobalStyle(` body, body * { color: ${adjustedFontColorRGB}; } a.sametitle:hover { color: ${darkerColorRGB} !important; } #ui_search_input_main_search::placeholder { color: ${adjustedFontColorRGB} !important; } `); const htmlElement = document.documentElement; htmlElement.style.setProperty('--mono-0', adjustedFontColorRGB); htmlElement.style.setProperty('--mono-1', adjustedFontColorRGB); htmlElement.style.setProperty('--mono-4', adjustedFontColorRGB); htmlElement.style.setProperty('--mono-7', adjustedFontColorRGB); htmlElement.style.setProperty('--mono-8', adjustedFontColorRGB); htmlElement.style.setProperty('--monof', dominantColorRGB); htmlElement.style.setProperty('--mono-a', adjustedFontColorRGB); htmlElement.style.setProperty('--mono-fb', dominantColorRGB); htmlElement.style.setProperty('--mono-f0', darkerColorRGB); htmlElement.style.setProperty('--mono-f2', darkerColorRGB); htmlElement.style.setProperty('--mono-f3', darkerColorRGB); htmlElement.style.setProperty('--mono-f4', dominantColorRGB); htmlElement.style.setProperty('--mono-f8', darkerColorRGB); htmlElement.style.setProperty('--mono-db', darkerColorRGB); htmlElement.style.setProperty('--mono-d8', darkerColorRGB); htmlElement.style.setProperty('--mono-e', darkerColorRGB); htmlElement.style.setProperty('--mono-d', dominantColorRGB); htmlElement.style.setProperty('--mono-ef', dominantColorRGB); htmlElement.style.setProperty('--mono-abs-3', dominantColorRGB); htmlElement.style.setProperty('--mono-abs-8', darkerColorRGB); htmlElement.style.setProperty('--mono-abs-a', adjustedFontColorRGB); htmlElement.style.setProperty('--mono-abs-d', adjustedFontColorRGB); htmlElement.style.setProperty('--mono-abs-f', adjustedFontColorRGB); htmlElement.style.setProperty('--mono-4', adjustedFontColorRGB); htmlElement.style.setProperty('--mono-5', adjustedFontColorRGB); htmlElement.style.setProperty('--mono-6', adjustedFontColorRGB); htmlElement.style.setProperty('--surface-primary-light', darkerColorRGB); htmlElement.style.setProperty('--surface-secondary-light', darkerColorRGB); htmlElement.style.setProperty('--surface-tertiary', dominantColorRGB); htmlElement.style.setProperty('--background', dominantColorRGB); htmlElement.style.setProperty('--gen-bg-lightgreen', darkerColorRGB); htmlElement.style.setProperty('--btn-primary-background-default', darkerColorRGB); htmlElement.style.setProperty('--btn-primary-background-hover', dominantColorRGB); htmlElement.style.setProperty('--btn-primary-background-active', adjustedFontColorRGB); htmlElement.style.setProperty('--btn-expand-background-default', darkerColorRGB); htmlElement.style.setProperty('--btn-secondary-background-hover-light', dominantColorRGB); htmlElement.style.setProperty('--btn-secondary-background-default-light', darkerColorRGB); htmlElement.style.setProperty('--header-item-link', adjustedFontColorRGB); htmlElement.style.setProperty('--btn-primary-text', adjustedFontColorRGB); htmlElement.style.setProperty('--btn-secondary-text', adjustedFontColorRGB); htmlElement.style.setProperty('--btn-expand-background-hover', dominantColorRGB); htmlElement.style.setProperty('--btn-expand-background-disabled', darkerColorRGB); htmlElement.style.setProperty('--link-text-default-light', dominantColorRGB); htmlElement.style.setProperty('--link-text-hover', darkerColorRGB); htmlElement.style.setProperty('--gen-blue-dark', adjustedFontColorRGB); htmlElement.style.setProperty('--gen-blue-darker', adjustedFontColorRGB); htmlElement.style.setProperty('--gen-blue-darkest', adjustedFontColorRGB); htmlElement.style.setProperty('--link-text-default', adjustedFontColorRGB); htmlElement.style.setProperty('--text-primary', adjustedFontColorRGB); htmlElement.style.setProperty('--header-item-link', adjustedFontColorRGB); htmlElement.style.setProperty('--text-secondary', adjustedFontColorRGB); const themeLightElement = document.querySelector('html.theme_light'); if (themeLightElement) { themeLightElement.style.setProperty('--mono-f', dominantColorRGB); themeLightElement.style.setProperty('--mono-fb', dominantColorRGB); themeLightElement.style.setProperty('--mono-f2', darkerColorRGB); themeLightElement.style.setProperty('--mono-f3', darkerColorRGB); themeLightElement.style.setProperty('--mono-f8', darkerColorRGB); themeLightElement.style.setProperty('--mono-db', darkerColorRGB); themeLightElement.style.setProperty('--mono-d8', darkerColorRGB); themeLightElement.style.setProperty('--mono-4', adjustedFontColorRGB); themeLightElement.style.setProperty('--mono-e', darkerColorRGB); themeLightElement.style.setProperty('--mono-ef', dominantColorRGB); themeLightElement.style.setProperty('--mono-abs-3', dominantColorRGB); themeLightElement.style.setProperty('--surface-primary-light', darkerColorRGB); themeLightElement.style.setProperty('--surface-secondary-light', darkerColorRGB); themeLightElement.style.setProperty('--surface-tertiary', dominantColorRGB); themeLightElement.style.setProperty('--background', dominantColorRGB); themeLightElement.style.setProperty('--gen-bg-lightgreen', darkerColorRGB); } const releaseLeftColumn = document.querySelector('.release_left_column'); if (releaseLeftColumn) { releaseLeftColumn.style.backgroundColor = dominantColorRGB; releaseLeftColumn.style.color = contrastFontColor; } const pageReleaseArtFrame = document.querySelector('.page_release_art_frame'); if (pageReleaseArtFrame) { pageReleaseArtFrame.style.backgroundColor = dominantColorRGB; pageReleaseArtFrame.style.color = contrastFontColor; } const exceptions = ['.color-square', '.catalog_btn']; const allTextElements = document.querySelectorAll('body, body *'); allTextElements.forEach(function(element) { const isException = exceptions.some(selector => element.matches(selector)); if (!isException) { element.style.color = adjustedFontColorRGB; } }); }; if (albumCover.complete) { albumCover.onload(); } } else { console.log("Capa do álbum não encontrada."); } }); function getContrastYIQ(rgb) { const yiq = ((rgb[0] * 299) + (rgb[1] * 587) + (rgb[2] * 114)) / 1000; return (yiq >= 128) ? 'black' : 'white'; } })();