Skip to content

Instantly share code, notes, and snippets.

@Kilian

Kilian/cheap-dark-mode.css Secret

Last active Jul 29, 2020
Embed
What would you like to do?
Beyond screen sizes, responsive design in 2020. Heart internet article
@media (prefers-color-scheme: dark) {
:root {
background: #111;
filter: invert(1) hue-rotate(180deg);
}
img,
video {
filter: invert(1) hue-rotate(180deg);
}
}
@media (prefers-reduced-motion: reduce) {
body *,
body *::before,
body *::after {
animation: none !important;
transition: none !important;
transition-duration: none !important;
}
}
@media (environment-blending: opaque) { }
@media (environment-blending: additive) { }
@media (environment-blending: subtractive) { }
body {
padding:
env(save-area-inset-top, 0px)
env(save-area-inset-right, 0px)
env(save-area-inset-bottom, 0px)
env(save-area-inset-left, 0px)
}
@media (hover: none) and (pointer: coarse) {
/* you're on a touch-only device */
}
@media (hover: none) and (pointer: fine) {
/* you're on a device without hover but with a stylus
or other fine pointing device */
}
@media (hover: hover) and (pointer: coarse) {
/* you're on a device with hover but a coarse pointer,
like a gamepad or wii remote*/
}
@media (hover: hover) and (pointer: fine) {
/* you're on a device with a mouse or trackpad */
}
@media (inverted-colors: none) {
/* colors are normal */
}
@media (inverted-colors: inverted) {
/* colors are inverted */
}
@media (light-level: dim) { }
@media (light-level: normal) { }
@media (light-level: washed) { }
/* ms high contrast */
@media (-ms-high-contrast: active) { }
@media (-ms-high-contrast: black-on-white) { }
@media (-ms-high-contrast: white-on-black) { }
/* forced colors */
@media (forced-colors: none) { }
@media (forced-colors: active) { }
const connection =
navigator.connection ||
navigator.mozConnection ||
navigator.webkitConnection;
if (
connection.saveData ||
['slow-2g', '2g', '3g'].includes(connection.effectiveType)
) {
/* data-saving measures like not preloading videos */
preloadVideo = false;
}
@media (prefers-color-scheme: dark) {
/* wants dark mode */
}
@media (prefers-color-scheme: light) {
/* wants light mode */
}
@media (prefers-contrast: high) { }
@media (prefers-contrast: no-preference) { }
@media (prefers-contrast: low) { }
@media (prefers-reduced-data: reduce) { }
@media (prefers-reduced-data: no-preference) { }
@media (prefers-reduced-motion: reduce) {
/* wants reduced motion */
}
@media (prefers-reduced-motion: no-preference) {
/* doesn't want reduced motion */
}
const video = document.createElement('video');
const canAutoPlay = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
video.setAttribute('autoplay', canAutoPlay);
@media (prefers-reduced-transparency: reduce) {
/* wants reduced transparency */
}
@media (prefers-reduced-transparency: no-preference) {
/* doesn't want reduced transparency */
}
<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.