Dark Mode Images

Read the README.md for more information on these concepts.

Apply CSS to the image

Image: "A Bug" © Vlad Gerasimov - http://vlad.studio

opacity: 0.75;
(On black background)

filter: grayscale(50%);

filter: brightness(.8) contrast(1.2)

Use Responsive Images

Image: "When The Night Comes" "When The Day Comes" © Vlad Gerasimov - http://vlad.studio

SVG ...

... as in-line DOM elements that can be styled with CSS.

As in-line <svg>

It's not only color SVG attributes (e.g. `fill` & `stroke`) that can be manipulated. Also try `visibility` & `opacity`.

² Uses SVGInjector © Waybury to convert to in-line.

... with the dark mode media query internal to the SVG.

As <img>
[³ Only works on Firefox & Opera browsers]

As <object>

As <embed>

As <iframe>