Skip to content

Instantly share code, notes, and snippets.

@phoebejaffe

phoebejaffe/dark-mode.css

Created November 19, 2019 16:50
Show Gist options
  • Save phoebejaffe/a41458c3bb286a8f6a79786b836a002d to your computer and use it in GitHub Desktop.
Save phoebejaffe/a41458c3bb286a8f6a79786b836a002d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dark-mode.css
html {
filter: brightness(0.8) contrast(130%) invert(100%) brightness(1.5) hue-rotate(180deg);
}
@phoebejaffe
Copy link
Author

phoebejaffe commented Nov 19, 2019 •
edited
Loading

Doesn't account for images. For a less-good dark mode that handles images properly, try:

html, img, video {
    filter: invert(100%) hue-rotate(180deg);
}

Basically inverts everything, then inverts images and videos a second time, thus bringing them back to normal.

@phoebejaffe
Copy link
Author

In JavaScript:

const style = document.createElement('style');
style.textContent = 'html, img, video {filter: invert(100%) hue-rotate(180deg);}';
document.head.appendChild(style);

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