Skip to content

Instantly share code, notes, and snippets.

@edudobay
Last active April 9, 2021 17:29
Show Gist options
  • Save edudobay/a608bbd351cb970ec6caffc6095d60dc to your computer and use it in GitHub Desktop.
Save edudobay/a608bbd351cb970ec6caffc6095d60dc to your computer and use it in GitHub Desktop.
Instant dark mode (bookmarklet)
// Thanks to https://twitter.com/derekstavis/status/1306021971163926528 !
// Install this as a bookmarklet, use a tool like https://caiorss.github.io/bookmarklet-maker/
const styleId = 'Instant-Dark-Mode'
const THEME = 'Instant-Dark-Mode'
const THEME_DARK = `${THEME}--dark`
const THEME_LIGHT = `${THEME}--light`
let element = document.getElementById(styleId)
if (!element) {
const s = document.createElement('style')
s.id = styleId
s.innerHTML = `body.${THEME}.${THEME_DARK} {
background-color: black;
filter: hue-rotate(180deg) invert(90%);
}`
document.body.appendChild(s)
}
const classList = document.body.classList
classList.add(THEME)
const wasDark = classList.contains(THEME_DARK)
const isDark = !wasDark
classList.toggle(THEME_DARK, isDark)
classList.toggle(THEME_LIGHT, !isDark)
@edudobay
Copy link
Author

edudobay commented Apr 9, 2021

To apply "permanently" to a website, with the help from some userstyles extension like Stylus, use this style:

body {
  background-color: black;
  filter: hue-rotate(180deg) invert(90%);
}

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