Skip to content

Instantly share code, notes, and snippets.

@lnikkila

lnikkila/bookmarklet.md

Last active June 8, 2020 00:34
Show Gist options
  • Save lnikkila/ae5685661c23d0d7f636 to your computer and use it in GitHub Desktop.
Save lnikkila/ae5685661c23d0d7f636 to your computer and use it in GitHub Desktop.
Download ZIP
Instant night mode for any website! https://lnikki.la/articles/night-mode-css-filter/
Raw
bookmarklet.md
Bookmarklet

Copy and paste this into a bookmark:

javascript:!function(d){d.head.appendChild(d.createElement("style")).innerText="html,img,video{-webkit-filter:invert(1)hue-rotate(180deg);filter:invert(1)hue-rotate(180deg)}body{background:#000}"}(document);
Raw
style.css
html, img, video {
-webkit-filter: invert(1) hue-rotate(180deg);
filter: invert(1) hue-rotate(180deg);
}
body {
background: black;
}
@wangwy
Copy link

wangwy commented Dec 8, 2015

when i add columns to a page style,the picture do not show.

http://wangwy.github.io/testExample/epub/books/xiaowangzi/index_split_001.html

how to solve this problem?

@torappinfo
Copy link

For webview/chrome 81, this does not work. changing html to body as "body,img,video{filter:invert(1)}" seems work but make some pages completely black.
So, what is the difference between html and body?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment