Auto dark mode

Invert the whold website

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey, Greasemonkey или Violentmonkey.

Для установки этого скрипта вам необходимо установить расширение, такое как Tampermonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Userscripts.

Чтобы установить этот скрипт, сначала вы должны установить расширение браузера, например Tampermonkey.

Чтобы установить этот скрипт, вы должны установить расширение — менеджер скриптов.

(у меня уже есть менеджер скриптов, дайте мне установить скрипт!)

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

(у меня уже есть менеджер стилей, дайте мне установить скрипт!)

// ==UserScript==
// @name         Auto dark mode
// @namespace    https://mmis1000.me/
// @version      0.4
// @description  Invert the whold website
// @author       MMis1000
// @include     http://*
// @include     https://*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var inIframe = window.top !== window.self

    function invert(color, strength = 0.9) {
        var gamma = 1
        var [r, g, b, a] = /rgba?\((.+?),(.+?),(.+?)(?:,(.+?))?\)/.exec(color).slice(1).map(Number)
        var invertedRUncompressed = (255 ** gamma - r ** gamma) * strength + (r ** gamma) * (1 - strength)
        var invertedGUncompressed = (255 ** gamma - g ** gamma) * strength + (g ** gamma) * (1 - strength)
        var invertedBUncompressed = (255 ** gamma - b ** gamma) * strength + (b ** gamma) * (1 - strength)

        var invertedR = ~~(invertedRUncompressed ** (1 / gamma))
        var invertedG = ~~(invertedGUncompressed ** (1 / gamma))
        var invertedB = ~~(invertedBUncompressed ** (1 / gamma))

        var newColor = `rgba(${invertedR},${invertedG},${invertedB},${a || 1})`
        console.log(newColor)
        return newColor
    }

    var root = document.querySelector(':root')
    var body = document.querySelector('body')
    var rootStyle = window.getComputedStyle(root)
    var bodyStyle = window.getComputedStyle(body)
    var style = ''

    var background = null

    if (rootStyle.backgroundColor === 'rgba(0, 0, 0, 0)' && bodyStyle.backgroundColor === 'rgba(0, 0, 0, 0)') {
        background = invert('rgba(255,255,255,1)')
    } else if (rootStyle.backgroundColor !== 'rgba(0, 0, 0, 0)') {
        background = invert(rootStyle.backgroundColor)
    } else {
        background = invert(bodyStyle.backgroundColor)
    }

    if (inIframe) {
        // we don't need background and yet another invert in iframe
        style = `
svg, img, video, canvas {
  filter: hue-rotate(180deg) invert(100%);
}
`
    } else {
        style = `
:root {
  background-color: ${background} !important;
  filter: invert(90%) hue-rotate(180deg);
}

svg, img, video, canvas {
  filter: hue-rotate(180deg) invert(100%);
}
`
    }

    var styleEl = document.createElement('style');
    styleEl.textContent = style
    document.head.appendChild(styleEl)
})();