deluminate.css

/* Invert the luminance iff any of the "delumine" styles are selected. */
html[hc^="delumine"] {
  -webkit-filter: invert() hue-rotate(180deg) brightness(105%) contrast(105%);
}
html[hc^="delumine"][hc*="kill_background"],
html[hc^="delumine"][hc*="kill_background"] body {
  background-image: none !important;
  background-color: #FFF !important;
  color: #BBB !important;
}
html[hc^="noinvert"][hc*="kill_background"],
html[hc^="noinvert"][hc*="kill_background"] body {
  background-image: none !important;
  background-color: #000 !important;
  color: #BBB !important;
}
html[hc*="kill_background"] * {
  color: #BBB !important;
}
html[hc*="kill_background"] *[deluminate_imagetype]:not(img):not(a) {
  background-image: none !important;
  background-color: none !important;
  color: #BBB !important;
  text-indent: 0 !important;
}

/* Override the above with a low-contrast version if selected. */
html[hc^="delumine"][hc*="low-contrast"] {
  -webkit-filter: invert() hue-rotate(180deg) brightness(105%) contrast(85%);
}

/* Lower the contrast without inverting the luminance. */
html[hc^="noinvert-low-contrast"] {
  -webkit-filter: contrast(85%);
}

/* Lower the brightness without inverting the luminance. */
html[hc^="noinvert-dim1"] {
  -webkit-filter: brightness(90%);
}
html[hc^="noinvert-dim2"] {
  -webkit-filter: brightness(80%);
}
html[hc^="noinvert-dim3"] {
  -webkit-filter: brightness(70%);
}
html[hc^="noinvert-dim4"] {
  -webkit-filter: brightness(60%);
}
html[hc^="noinvert-dim5"] {
  -webkit-filter: brightness(50%);
}

/* The low-contrast version of the above. */
html[hc^="noinvert-dim1"][hc*="low-contrast"] {
  -webkit-filter: contrast(85%) brightness(90%);
}
html[hc^="noinvert-dim2"][hc*="low-contrast"] {
  -webkit-filter: contrast(85%) brightness(80%);
}
html[hc^="noinvert-dim3"][hc*="low-contrast"] {
  -webkit-filter: contrast(85%) brightness(70%);
}
html[hc^="noinvert-dim4"][hc*="low-contrast"] {
  -webkit-filter: contrast(85%) brightness(60%);
}
html[hc^="noinvert-dim5"][hc*="low-contrast"] {
  -webkit-filter: contrast(85%) brightness(50%);
}


/* Workaround for new issue in Chrome 45 that prevents the filter from applying
 * to the canvas background.
 */
#deluminate_fullscreen_workaround {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -2147483648;
}

/* Workaround for blurriness on high dpi displays. See Chromium issue 156019. */
html[hc*="hw_accel"] {
  -webkit-backface-visibility: hidden;
}

/* Uninvert select items within the document.
 * Note: Chrome clears -webkit-filter on all full-screen ancestor tags, killing
 * the top-level delumination filter. This is usually desirable (e.g., for
 * Youtube videos), so instead of fighting it, just avoid trying to "uninvert"
 * images in this scenario.
 */

/* Uninvert dialog boxes (except the "Compose" box in Gmail, identified by the
 * "aria-labelledby" attribute. */
html[hc*="delumine"]:not(*:-webkit-full-screen-ancestor) [role="dialog"]:not([aria-labelledby]):not(paper-dialog) {
  -webkit-filter: contrast(95%) brightness(95%) hue-rotate(180deg) invert();
}

/* For the -noimg variant, uninvert all images. */
html[hc*="delumine-noimg"]:not(*:-webkit-full-screen-ancestor) :-webkit-any(
img,
/* Check for "url" in the style attribute, which is usually a fancy way to specify an image */
[style*="url"],
[deluminate_imageType],
canvas,
embed,
object,
video) {
  -webkit-filter: contrast(95%) brightness(95%) hue-rotate(180deg) invert();
}
/* Avoid performing the uninversion process on anything that is a descendant of
 * something uninverted. */
html[hc*="delumine-noimg"]:not(*:-webkit-full-screen-ancestor) :-webkit-any(
img,
[style*="url"],
[deluminate_imageType],
[role="dialog"],
canvas,
embed,
object,
video) :-webkit-any(
img,
[style*="url"],
[deluminate_imageType],
[role="dialog"],
canvas,
embed,
object,
video) {
  -webkit-filter: none;
}

/* The "smart" filter is more selective about what to uninvert. */
html[hc*="delumine-smart"]:not(*:-webkit-full-screen-ancestor) body :-webkit-any(
	/* Leave PNG and GIF format images inverted, since they usually are
	 * identifiable even when inverted. */
	img:not([src$=".png"]):not([src$=".gif"]):not([src$=".PNG"]):not([src$=".GIF"]):not([src^="data:image"]),
	[itemprop="photo"],
	[itemprop="image"],
	[src^="data:image/jpeg"],
	[deluminate_imageType="jpg"],
	[deluminate_imageType="animated gif"],
	[style*=".jpg"],
	[style*=".JPG"],
	[style*=".jpeg"],
	[style*=".JPEG"],
	[style*=".webp"],
	[style*=".WEBP"],
	/* It's usually not desireable to invert these tags. */
	canvas,
	embed:not([type$="pdf"]),
	object,
	video),
/* Handle PDF previews in Gmail by reinverting the uninverted document in the
 * dialog. */
html[hc*="delumine-smart"]:not(*:-webkit-full-screen-ancestor) [role="dialog"] [role="document"] {
  -webkit-filter: contrast(95%) brightness(95%) hue-rotate(180deg) invert();
}
/* Avoid performing the uninversion process on anything that is a descendant of
 * something uninverted. */
html[hc*="delumine-smart"]:not(*:-webkit-full-screen-ancestor) body :-webkit-any(
	img:not([src$=".png"]):not([src$=".gif"]):not([src$=".PNG"]):not([src$=".GIF"]):not([src^="data:image"]),
	[itemprop="photo"],
	[itemprop="image"],
	[src^="data:image/jpeg"],
	[deluminate_imageType="jpg"],
	[style*=".jpg"],
	[style*=".JPG"],
	[style*=".jpeg"],
	[style*=".JPEG"],
	[style*=".webp"],
	[style*=".WEBP"],
	[role="dialog"],
	canvas,
	embed:not([type$="pdf"]),
	object,
	video) :-webkit-any(
	img:not([src$=".png"]):not([src$=".gif"]):not([src$=".PNG"]):not([src$=".GIF"]):not([src^="data:image"]),
	[itemprop="photo"],
	[itemprop="image"],
	[src^="data:image/jpeg"],
	[deluminate_imageType="jpg"],
	[style*=".jpg"],
	[style*=".JPG"],
	[style*=".jpeg"],
	[style*=".JPEG"],
	[style*=".webp"],
	[style*=".WEBP"],
	[role="dialog"],
	canvas,
	embed:not([type$="pdf"]),
	object,
	video) {
  -webkit-filter: none;
}

/* Reinvert all images that have been uninverted collectively by being in a dialog. */
html[hc*="delumine-all"]:not(*:-webkit-full-screen-ancestor) [role="dialog"] :-webkit-any(
	img,
	[deluminate_imageType],
	[style*="url"],
	canvas,
	embed,
	object,
	video) {
  -webkit-filter: contrast(95%) brightness(95%) hue-rotate(180deg) invert();
}
/* Avoid performing the reinversion process on anything that is a descendant of
 * something reinverted. */
html[hc*="delumine-all"]:not(*:-webkit-full-screen-ancestor) [role="dialog"] :-webkit-any(
	img,
	[deluminate_imageType],
	[style*="url"],
	canvas,
	embed,
	object,
	video) :-webkit-any(
	img,
	[deluminate_imageType],
	[style*="url"],
	canvas,
	embed,
	object,
	video) {
  -webkit-filter: none;
}

/* Force text to plain black text on white (which, when inverted, is the
 * preferable white text on black. */
html[hc*="delumine"][hc*="force_text"] input[type="text"] {
  background-image: none !important;
  background-color: white !important;
  color: black !important;
}

/* ...unless it's uninverted because of a background image. Then set it
 * directly to white text on black. */
html[hc*="delumine-smart"][hc*="force_text"] input[type="text"]:-webkit-any(
	[src^="data:image/jpeg"],
	[deluminate_imageType="jpg"],
	[style*=".jpg"],
	[style*=".JPG"],
	[style*=".jpeg"],
	[style*=".JPEG"]) {
  background-image: none !important;
  background-color: black !important;
  color: white !important;
}

html[hc*="delumine-noimg"][hc*="force_text"] input[style*="url"]:-webkit-any(
  [type="text"], [dir]) {
  background-image: none !important;
  background-color: black !important;
  color: white !important;
}

/* Crude workaround for my inability to inject deluminate into preview iframes
 * on the new tab page. */
html[hc*="delumine-noimg"] iframe[src^="chrome-search://most-visited"],
html[hc*="delumine-smart"] iframe[src^="chrome-search://most-visited"] {
  -webkit-filter: contrast(95%) brightness(95%) hue-rotate(180deg) invert();
}