Back to writing

Table of contents
1. mix-blend-mode
2. Canvas
3. Night Light with CSS
4. Night Light with canvas

Note: this article will make more sense if you are using a mouse or other pointing device. Requires javascript.

Warning: things can get a little spooky in the dark!

You can read the source code for this document here (or by pressing Ctrl+U in chrome / firefox).

mix-blend-mode (¶)

I really like the “dark mode” switch on https://tonsky.me [1]. It’s a fun subversion of expectations and reminds me of Night Light (1995), a PC game for kids about using a flashlight in the dark.

One of the splash texts I put on my homepage a while back says “looks better in black and white”. Yesterday, while hypnotized by my own pulsating creation [2], I had the idea to put the two together and create a grayscale “flashlight”, or perhaps a lens. I learned that the CSS property mix-blend-mode allows me to make a div that turns everything below it gray. The other mix-blend-mode options are cool too.

The results don’t look exactly like a light source, but it’s a nice toy. Here are some different flashlights and photos with which to admire them:

It applies to all elements on the page. sample sample sample sample sample.

♫ It’s just your imagination
♫ night time fascination

Canvas (¶)

I think those effects are fun, but they don’t really give you the feeling of being in the dark like tonsky’s flashlight switch. His works by setting the background color to black, so all the black text “disappears” even though it’s still there. I wanted to come up with a flashlight that really works for all elements on the page, but I don’t think any combination of DOM elements and mix-blend-modes would do it.

I’ve never used HTML canvas before, but I realized that would be the correct solution. I was able to get a basic flashlight effect working by covering the entire screen in a black rectangle, and punching a hole in it.

If at any time you need to come back, all you must do is open your eyes.

T