Skip to content

Instantly share code, notes, and snippets.

@ajmeese7
Created August 6, 2020 12:10
Show Gist options
  • Save ajmeese7/a2ea442a9503178e6900348d6bede427 to your computer and use it in GitHub Desktop.
Save ajmeese7/a2ea442a9503178e6900348d6bede427 to your computer and use it in GitHub Desktop.
Shortest dark mode in CSS
/* https://dev.to/akhilarjun/one-line-dark-mode-using-css-24li */
html[theme='dark-mode'] {
/* Inverse the colors of all HTML elements */
filter: invert(1) hue-rotate(180deg);
}
html[theme='dark-mode'] img {
/* Inverse the images back to normal */
filter: invert(1) hue-rotate(180deg);
}
html {
/* Animate the transition so it doesn't flash */
transition: color 300ms, background-color 300ms;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment