Skip to content

Instantly share code, notes, and snippets.

@mrrovot
Created January 7, 2019 05:56
Show Gist options
  • Save mrrovot/8fe31b2f04e96fa7b84b6dca8807d4d1 to your computer and use it in GitHub Desktop.
Save mrrovot/8fe31b2f04e96fa7b84b6dca8807d4d1 to your computer and use it in GitHub Desktop.
/* (1) Invert colors, reduce contrast */
html:not(.nodarken):not(.darkeni) {
filter: invert(100%) hue-rotate(180deg) brightness(75%) contrast(90%) !important;
background-image: none !important;
background-color: #000 !important;
}
/* (2) Invert colors */
html:not(.nodarken).darkeni {
filter: invert(100%) hue-rotate(180deg) brightness(50%) contrast(50%) !important;
background-image: none !important;
background-color: #000 !important;
}
/* (3) Reduce contrast */
html.nodarken.darkeni {
filter: brightness(50%) contrast(50%) !important;
}
/* (1) Invert colors, reduce contrast */
html:not(.nodarken):not(.darkeni) body {
background-image: none !important;
background-color: #fff !important;
color: #222 !important;
}
/* (2) Invert colors */
html:not(.nodarken).darkeni body {
background-image: none !important;
background-color: #fff !important;
color: #555 !important;
}
/* (3) Reduce contrast */
html.nodarken.darkeni body {
background-color: #aaa !important;
}
/* (1) Invert colors, reduce contrast */
html:not(.nodarken):not(.darkeni) img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html:not(.nodarken):not(.darkeni) canvas,
html:not(.nodarken):not(.darkeni) embed,
html:not(.nodarken):not(.darkeni) object,
html:not(.nodarken):not(.darkeni) video,
html:not(.nodarken):not(.darkeni) *[role="img"],
html:not(.nodarken):not(.darkeni) iframe[src*="youtube"],
html:not(.nodarken):not(.darkeni) iframe[src*="video"],
html:not(.nodarken):not(.darkeni) iframe[src*="player"] {
filter: contrast(111%) brightness(100%) hue-rotate(-180deg) invert(100%) !important;
}
html:not(.nodarken):not(.darkeni) iframe[src*="disqus"] {
filter: initial !important;
}
html:not(.nodarken):not(.darkeni) *[role="img"] img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html:not(.nodarken):not(.darkeni) *[role="button"] img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html:not(.nodarken):not(.darkeni) *[role="menu"] img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html:not(.nodarken):not(.darkeni) *[role="img"] *[role="img"] {
filter: initial !important;
}
html:not(.nodarken):not(.darkeni) :-webkit-full-screen img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html:not(.nodarken):not(.darkeni) img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]):-webkit-full-screen,
html:not(.nodarken):not(.darkeni) :-webkit-full-screen canvas,
html:not(.nodarken):not(.darkeni) canvas:-webkit-full-screen,
html:not(.nodarken):not(.darkeni) :-webkit-full-screen embed,
html:not(.nodarken):not(.darkeni) embed:-webkit-full-screen,
html:not(.nodarken):not(.darkeni) :-webkit-full-screen object,
html:not(.nodarken):not(.darkeni) object:-webkit-full-screen,
html:not(.nodarken):not(.darkeni) :-webkit-full-screen video,
html:not(.nodarken):not(.darkeni) video:-webkit-full-screen,
html:not(.nodarken):not(.darkeni) *[role="img"]:-webkit-full-screen,
html:not(.nodarken):not(.darkeni) :-webkit-full-screen *[role="img"],
html:not(.nodarken):not(.darkeni) :-webkit-full-screen iframe[src*="youtube"],
html:not(.nodarken):not(.darkeni) iframe[src*="youtube"]:-webkit-full-screen,
html:not(.nodarken):not(.darkeni) :-webkit-full-screen iframe[src*="video"],
html:not(.nodarken):not(.darkeni) iframe[src*="video"]:-webkit-full-screen,
html:not(.nodarken):not(.darkeni) :-webkit-full-screen iframe[src*="player"],
html:not(.nodarken):not(.darkeni) iframe[src*="player"]:-webkit-full-screen
{
filter: brightness(50%) contrast(50%) !important;
}
/* (2) Invert colors */
html:not(.nodarken).darkeni img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html:not(.nodarken).darkeni canvas,
html:not(.nodarken).darkeni embed,
html:not(.nodarken).darkeni object,
html:not(.nodarken).darkeni video,
html:not(.nodarken).darkeni *[role="img"],
html:not(.nodarken).darkeni iframe[src*="youtube"],
html:not(.nodarken).darkeni iframe[src*="video"],
html:not(.nodarken).darkeni iframe[src*="player"] {
filter: contrast(50%) brightness(50%) hue-rotate(-180deg) invert(100%) !important;
}
html:not(.nodarken).darkeni iframe[src*="disqus"] {
filter: initial !important;
}
html:not(.nodarken).darkeni *[role="img"] img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html:not(.nodarken).darkeni *[role="button"] img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html:not(.nodarken).darkeni *[role="menu"] img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html:not(.nodarken).darkeni *[role="img"] *[role="img"] {
filter: initial !important;
}
html:not(.nodarken).darkeni :-webkit-full-screen img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html:not(.nodarken).darkeni img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]):-webkit-full-screen,
html:not(.nodarken).darkeni :-webkit-full-screen canvas,
html:not(.nodarken).darkeni canvas:-webkit-full-screen,
html:not(.nodarken).darkeni :-webkit-full-screen embed,
html:not(.nodarken).darkeni embed:-webkit-full-screen,
html:not(.nodarken).darkeni :-webkit-full-screen object,
html:not(.nodarken).darkeni object:-webkit-full-screen,
html:not(.nodarken).darkeni :-webkit-full-screen video,
html:not(.nodarken).darkeni video:-webkit-full-screen,
html:not(.nodarken).darkeni *[role="img"]:-webkit-full-screen,
html:not(.nodarken).darkeni :-webkit-full-screen *[role="img"],
html:not(.nodarken).darkeni :-webkit-full-screen iframe[src*="youtube"],
html:not(.nodarken).darkeni iframe[src*="youtube"]:-webkit-full-screen,
html:not(.nodarken).darkeni :-webkit-full-screen iframe[src*="video"],
html:not(.nodarken).darkeni iframe[src*="video"]:-webkit-full-screen,
html:not(.nodarken).darkeni :-webkit-full-screen iframe[src*="player"],
html:not(.nodarken).darkeni iframe[src*="player"]:-webkit-full-screen
{
filter: brightness(50%) contrast(50%) !important;
}
/* (3) Reduce contrast */
html.nodarken.darkeni img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html.nodarken.darkeni canvas,
html.nodarken.darkeni embed,
html.nodarken.darkeni object,
html.nodarken.darkeni video,
html.nodarken.darkeni *[role="img"],
html.nodarken.darkeni iframe[src*="youtube"],
html.nodarken.darkeni iframe[src*="video"],
html.nodarken.darkeni iframe[src*="player"] {
filter: contrast(133%) brightness(100%) !important;
}
html.nodarken.darkeni iframe[src*="disqus"] {
filter: initial !important;
}
html.nodarken.darkeni *[role="img"] img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html.nodarken.darkeni *[role="button"] img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html.nodarken.darkeni *[role="menu"] img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html.nodarken.darkeni *[role="img"] *[role="img"] {
filter: initial !important;
}
html.nodarken.darkeni :-webkit-full-screen img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]),
html.nodarken.darkeni img:not(.tex):not(.math):not(.mathdisplay):not(.math-display):not(.mwe-math-fallback-image-inline):not(.action):not(.actionIcon):not([src*="math"]):not([role="button"]):not([role="menu"]):-webkit-full-screen,
html.nodarken.darkeni :-webkit-full-screen canvas,
html.nodarken.darkeni canvas:-webkit-full-screen,
html.nodarken.darkeni :-webkit-full-screen embed,
html.nodarken.darkeni embed:-webkit-full-screen,
html.nodarken.darkeni :-webkit-full-screen object,
html.nodarken.darkeni object:-webkit-full-screen,
html.nodarken.darkeni :-webkit-full-screen video,
html.nodarken.darkeni video:-webkit-full-screen,
html.nodarken.darkeni :-webkit-full-screen iframe[src*="youtube"],
html.nodarken.darkeni *[role="img"]:-webkit-full-screen,
html.nodarken.darkeni :-webkit-full-screen *[role="img"],
html.nodarken.darkeni iframe[src*="youtube"]:-webkit-full-screen,
html.nodarken.darkeni :-webkit-full-screen iframe[src*="video"],
html.nodarken.darkeni iframe[src*="video"]:-webkit-full-screen,
html.nodarken.darkeni :-webkit-full-screen iframe[src*="player"],
html.nodarken.darkeni iframe[src*="player"]:-webkit-full-screen
{
filter: brightness(50%) contrast(50%) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment