Skip to content

Instantly share code, notes, and snippets.

@kfur
Created July 2, 2019 20:12
Show Gist options
  • Save kfur/50947a48992623963468ee109727d1d3 to your computer and use it in GitHub Desktop.
Save kfur/50947a48992623963468ee109727d1d3 to your computer and use it in GitHub Desktop.
Inverting html page colors
/* Leading rule */
html {
-webkit-filter: invert(100%) hue-rotate(180deg) brightness(80%) contrast(120%) !important;
filter: invert(100%) hue-rotate(180deg) brightness(80%) contrast(120%) !important;
}
/* Reverse rule */
img,
video,
:not(object):not(body)>embed,
object,
svg image,
[style*="background:url"],
[style*="background-image:url"],
[style*="background: url"],
[style*="background-image: url"],
[background],
twitterwidget,
.mwe-popups-discreet>svg,
.mw-mmv-overlay,
#Vorlage_Infobox_Chemikalie>tbody>tr:nth-child(2)>td>a {
-webkit-filter: invert(100%) hue-rotate(180deg) !important;
filter: invert(100%) hue-rotate(180deg) !important;
}
[style*="background:url"] *,
[style*="background-image:url"] *,
[style*="background: url"] *,
[style*="background-image: url"] *,
input,
[background] *,
img[src^="https://s0.wp.com/latex.php"],
twitterwidget .NaturalImage-image,
.mwe-math-fallback-image-inline,
.mwe-math-fallback-image-display,
.mwe-popups image,
img[src*="svg.png"],
img[alt^="Skeletal"i],
img[alt^="Structural"i] {
-webkit-filter: none !important;
filter: none !important;
}
.compatibility-with-darkreader-below-4-3-3 {
background: white !important;
}
/* Text contrast */
html {
text-shadow: 0 0 0 !important;
}
/* Full screen */
:-webkit-full-screen,
:-webkit-full-screen * {
-webkit-filter: none !important;
filter: none !important;
}
:-moz-full-screen,
:-moz-full-screen * {
-webkit-filter: none !important;
filter: none !important;
}
:fullscreen,
:fullscreen * {
-webkit-filter: none !important;
filter: none !important;
}
/* Page background */
html {
background: rgb(0, 0, 0) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment