MediaWiki:Vector-dark.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

const socialMap = {
  "discord.svg": "#7289da",
  "twitter.svg": "#1da1f2",
  "facebook.svg": "#1877f2"
};

document.querySelectorAll('img[src$=".svg"]').forEach(img => {
  const src = img.getAttribute('src');
  for (const [key, color] of Object.entries(socialMap)) {
    if (src.includes(key)) {
      img.style.filter = `invert(1) sepia(1) saturate(10000%) hue-rotate(${getHue(color)}deg)`;
    }
  }
});

// You’d need a helper function to translate color to hue — I can help with that too.
function getHue(hex) {
  // Remove '#' if present
  hex = hex.replace(/^#/, '');

  // Convert shorthand (#abc → #aabbcc)
  if (hex.length === 3) {
    hex = hex.split('').map(x => x + x).join('');
  }

  const r = parseInt(hex.substr(0, 2), 16) / 255;
  const g = parseInt(hex.substr(2, 2), 16) / 255;
  const b = parseInt(hex.substr(4, 2), 16) / 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h;

  if (max === min) {
    h = 0;
  } else if (max === r) {
    h = (60 * ((g - b) / (max - min)) + 360) % 360;
  } else if (max === g) {
    h = (60 * ((b - r) / (max - min)) + 120) % 360;
  } else {
    h = (60 * ((r - g) / (max - min)) + 240) % 360;
  }

  return Math.round(h);
}