Skip to content

Instantly share code, notes, and snippets.

@JesusLeon
Created May 2, 2020 14:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JesusLeon/09ac6f893d80db88bddc6d66b66099c0 to your computer and use it in GitHub Desktop.
Save JesusLeon/09ac6f893d80db88bddc6d66b66099c0 to your computer and use it in GitHub Desktop.
Invert sites to a darker gamma correction (pseudo dark mode)
// ==UserScript==
// @name 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)') {
// If no background is set it will return 000, so let's invert that.
background = invert('rgba(0,0,0,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 {
filter: invert(90%) hue-rotate(180deg);
background-color: ${background} !important;
}
svg, img, video, canvas {
filter: hue-rotate(180deg) invert(100%);
}
`
}
var styleEl = document.createElement('style');
styleEl.textContent = style
document.head.appendChild(styleEl)
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment