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>