CoinpayU Orange Color

Greasy Fork is available in English.
CoinpayU Orange Color

Orange Color and more relaxing color for the eye , make the website whitemode then refresh the page so it can work
当前为 2024-03-29 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        CoinpayU Orange Color
// @namespace   Violentmonkey Scripts
// @match       https://www.coinpayu.com/*
// @grant       none
// @version     1.2
// @author      Arsalan Abd Al Salam
// @license MIT
// @description Orange Color and more relaxing color for the eye , make the website whitemode then refresh the page so it can work
// ==/UserScript==
let light = false

const observerConfig = { subtree: true, childList: true, attributes: true, attributeFilter: ['style', 'class'] }

const isLight = elem => {
  let { groups: { r, g, b, a } } = /rgba?\((?<r>\d+),\s*(?<g>\d+),\s*(?<b>\d+)(?:,\s*(?<a>\d+(?:\.\d+)?))?\)/.exec(getComputedStyle(elem, null).getPropertyValue('background-color') || 'rgba(0, 0, 0, 0)')
  r = Number.parseInt(r)
  g = Number.parseInt(g)
  b = Number.parseInt(b)
  if (a) {
    a = Number.parseFloat(a)
    r = ((1 - a) * 255) + (a * r)
    g = ((1 - a) * 255) + (a * g)
    b = ((1 - a) * 255) + (a * b)
  }
  return Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b)) > 127.5
}

let invertedMap = []

const checkBgImage = (bg) => bg && bg.split(',').some(bg => bg.includes('url('))

const checkBgTag = new Set(['DIV', 'HEADER', 'FOOTER', 'NAV', 'SECTION', 'MAIN'])
const mustRevertTags = new Set(['IMG', 'IMAGE', 'CANVAS', 'VIDEO', 'IFRAME'])
const fixInvert = el => {
  const tag = el.tagName?.toUpperCase()
  if (tag == null || tag === 'BODY' || tag === 'SLOT' || !(el instanceof Element) || !el.isConnected) return
  if (mustRevertTags.has(tag) || (checkBgTag.has(tag) && !isLight(el)) || checkBgImage(el.style?.backgroundImage) || checkBgImage(getComputedStyle(el, null)['background-image'])) {
    invertedMap = invertedMap.filter(ref => !Object.is(el, ref.deref()))
    if (invertedMap.some(ref => ref.deref()?.contains?.(el))) {
      el.style.filter = null
    } else {
      invertedMap.push(new WeakRef(el))
      el.style.filter = light ? 'invert(1) contrast(1.15) saturate(1.05)' : null
    }
  }
}

const trackedShadowElems = new WeakSet()
let modified = new Set()
let chain = Promise.resolve()
const selector = [...checkBgTag, ...mustRevertTags].map(t => t.toLowerCase()).join(',')
const observer = new MutationObserver((records) => {
  if (modified.size === 0) {
    chain = chain.then(
      () => {
        const elems = modified
        modified = new Set()
        for (let elem of elems.values()) {
          fixInvert(elem)

          // TODO: Create function to handle shadowRoot
          // Something like this: https://github.com/medialize/ally.js/blob/master/src/query/shadow-hosts.js
          if (!elem.tagName?.includes('-') || !elem.shadowRoot || trackedShadowElems.has(elem)) continue
          trackedShadowElems.add(elem)
        }
      },
      () => console.error
    )
  }

  for (const {target, addedNodes} of records) {
    modified.add(target)
    for (const elem of addedNodes) modified.add(elem)
    for (const elem of target.querySelectorAll(selector)) modified.add(elem)
  }
});

function invertColor() {
  light = isLight(document.documentElement) && isLight(document.body)
  document.documentElement.style.filter = light ? 'invert(0.85)' : null
  if (light) {
    Array.from(document.querySelectorAll('body *')).forEach(fixInvert)
    observer.observe(document.body, observerConfig);
  } else {
    observer.disconnect()
    invertedMap.forEach(ref => {
      const style = ref.deref()?.style
      if (style) style.filter = null
    })
    invertedMap = []
  }
}

try {
  invertColor()
} catch {}

addEventListener("DOMContentLoaded", () => {
  invertColor()
});