// ==UserScript==
// @name:ko           글로벌 다크모드
// @name              Global Darkmode
// @name:ru           Глобальный темный режим
// @name:jp           グローバルダークモード
// @name:zh-TW        全局暗模式
// @name:zh-CN        全局暗模式

// @description:ko    밝은 색의 웹 사이트들만 어둡게 만듭니다.
// @description       Turn only bright websites to dark.
// @description:ru    Делайте темными только яркие сайты.
// @description:jp    明るいウェブサイトだけを暗くします。
// @description:zh-TW 它只會將明亮的網站變為黑暗。
// @description:zh-CN 它只会将明亮的网站变为黑暗。

// @namespace         https://ndaesik.tistory.com/
// @version           2022.05.24.10.48
// @author            ndaesik
// @icon              data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><text x="-19vh" y="84vh" font-size="100vh">🪐</text></svg>
// @match             *://*/*

// @grant             GM.getValue
// @grant             GM.setValue
// @grant             GM_registerMenuCommand
// @run-at            document-start
// @downloadURL none
// ==/UserScript==
let PRE = document.createElement(`style`)
PRE.innerText = `* {background:#202124!important; border-color:#3c4043!important; color-scheme:dark!important; color:#bdc1c6!important}`
PRE.classList.add(`PRE`)
self == top && document.head?.appendChild(PRE)

window.addEventListener(`load`, () => {
(async () => {
(await GM.getValue(`OnURL`) == undefined) ? GM.setValue(`OnURL`, ``) : false;
(await GM.getValue(`OfURL`) == undefined) ? GM.setValue(`OfURL`, `youtube.com/live_chat?`) : false;
let OnURL = await GM.getValue(`OnURL`)
  , OfURL = await GM.getValue(`OfURL`)
  , BLrun = OnURL == `` || OnURL.replaceAll(/\s/g,``).split(/[\r\n]+|,/g).filter(w => window.document.URL.indexOf(w) > -1).length == 0
  , WLrun = OfURL != `` && OfURL.replaceAll(/\s/g,``).split(/[\r\n]+|,/g).filter(m => window.document.URL.indexOf(m) > -1).length != 0
  , Lturn = () => {
        let e = document.querySelector(`#GDM_option`);
        (e.style.display == `none`)
            ? e.style.display = `block`
            : (e.style.display = `none`, GM.setValue(`OnURL`, document.querySelector(`#GDM_On_filter`).value), GM.setValue(`OfURL`, document.querySelector(`#GDM_Off_filter`).value))
    }
document.body.insertAdjacentHTML(`beforeend`, `
<div id="GDM_option" style="display: none">
    <div id="GDM_header">
        <div>
            <input id="GDM_Abt" type="radio" name="contact" checked="checked">
            <label class="GDM_label GDM_button" for="GDM_Abt">&#128712;</label>
        </div>
        <b>Global Darkmode</b>
        <div>
            <a id="GDM_save" class="GDM_button">&#10006;</a>
        </div>
    </div>
    <input id="GDM_Off" type="radio" name="contact"><label for="GDM_Off" class="GDM_tabButtons">On</label><!--
 --><input id="GDM_On"  type="radio" name="contact"><label for="GDM_On" class="GDM_tabButtons">Off</label>
    <div id="GDM_content">
        <textarea id="GDM_Off_filter" spellcheck="false" placeholder="example.com,\nlotemipsum.com">${OfURL}</textarea>
        <textarea id="GDM_On_filter" spellcheck="false" placeholder="example.com,\nlotemipsum.com">${OnURL}</textarea>
        <div id="GDM_about">
            <div>
<b>On</b> tab URLs always apply this theme.</br>
<b>Off</b> tab URLs always do not apply.</br>
URLs are separated by commas and line breaks.
            </div>
            <div class="GDM_about_inner GDM_about_inner_btm" style="position:absolute; bottom:5px">
                <a href="https://greasyfork.org/scripts/434440/feedback" style="font-size: 12px">Suggestion & Bug Report</a></br>
                <a href="https://www.buymeacoffee.com/ndaesik" style="font-size: 12px">Buy me a coffee</a>
            </div>
        </div>
    </div>
</div>

<style>
#GDM_option * {all: initial}
#GDM_option b {font-weight: bold!important}
#GDM_option {background-color: #fff!important; height: 430px; position: fixed; top: 25px; right: 25px; width: 309px; z-index: 2147483647; box-shadow: 0 -1px 2px 0 rgb(0 0 0 / 30%), 0 -2px 6px 2px rgb(0 0 0 / 15%); user-select: none; padding:8px}
#GDM_option [type="radio"] {visibility: hidden; width: 0}
#GDM_option [type="radio"]:checked+label:not([for="GDM_Abt"]) {opacity: 1; border-color: orange}
#GDM_option label:not([for="GDM_Abt"]) {font-weight: bold; opacity: .3; height: 27px; width: 50%; background-color: #fff; display: inline-block; user-select: none; text-align: center!important; padding-top: 5px; border-top: 2px transparent solid}
#GDM_option label:not([for="GDM_Abt"]):hover {background-color: #FFF!important; opacity:1}
#GDM_save,#GDM_Abt~label {position: absolute; width: 25px; height: 25px; user-select: none; text-decoration: none!important; font-size: 16px}
#GDM_save {right: 8px; text-align: right}
#GDM_Abt~label:hover,#GDM_Abt:checked~label {color: orange}
#GDM_Abt~label {left: 8px}
#GDM_header {display: inline-block!important; width:100%!important; height: 34px; text-align: center; font-weight: bold}
#GDM_content>div {white-space: pre-line}
#GDM_content>*{background-color: #FFF!important; height: 340px; padding: 5px 8px; font-size: 14px; width: calc(309px - 32px)}
:is(#GDM_On,#GDM_Off):checked~#GDM_content #GDM_about,
#GDM_content>textarea {display: none}
#GDM_about>div {display: inline-block}
#GDM_On:checked~#GDM_content #GDM_On_filter,
#GDM_Off:checked~#GDM_content #GDM_Off_filter {display: block!important}
#GDM_option a:hover {cursor: pointer; text-decoration: underline}
</style>
`)
document.querySelector(`#GDM_save`).addEventListener(`click`, () => Lturn())

let bdyH0 = window.parent.document.body.offsetHeight == 0
  , frame = self != top
  , elems = document.querySelectorAll(`body > :not(script)`)
  , apply = () => document.head.appendChild(drkMo)
  , togle = () => (document.querySelector(`.drkMo`) == null) ? apply() : document.querySelector(`.drkMo`).remove()
  , drkMo = document.createElement(`style`)
  , check = (m, m2=0) => {
    let n = (n) => {return parseInt(getComputedStyle(document.querySelectorAll(m)[m2]).getPropertyValue(`background-color`).match(/\d+/g)[n])};
    return (n(0)*0.299+n(1)*0.587+n(2)*0.114) > 186 || n(3) == 0 }
drkMo.innerText = `
html {color-scheme:dark!important;color:#000}
html * {color-scheme:light!important;text-shadow:0 0 .1px}
html body {background:none!important}
html, html :is(i, img, image, embed, video, canvas, option, object, :fullscreen:not(iframe), iframe:not(:fullscreen)),
html body>* [style*="url("]:not([style*="cursor:"]):not([type="text"]) {filter:invert(1)hue-rotate(180deg)!important}
html body>* [style*="url("]:not([style*="cursor:"]) :not(#⁠),
html:not(#⁠) :is(canvas, option, object) :is(i, img, image, embed, video),
html:not(#⁠) video:fullscreen{filter:unset!important}`
drkMo.classList.add(`drkMo`)
document.querySelector(`.PRE`)?.remove()
if(WLrun) {apply()} else
    if(BLrun) {
        if((!frame && !bdyH0 || frame) && check(`html`) && check(`body`)) apply()
        if(!frame && bdyH0) {for (let i = 0; i < elems.length; i++) {if (elems[i].scrollHeight > window.innerHeight && check(`body > :not(script)`,i)) apply()}}
    }
GM_registerMenuCommand(`On/Off`, togle)
GM_registerMenuCommand(`Filter`, Lturn)
})()})