Following the macOS Mojave release last year, which introduced dark mode to the Mac, iOS 13 will include its own system-wide dark mode feature when it launches this fall. This was of great importance to iOS app developers, many of who will be updating their apps to support dark mode. But I think there's something that's being left out, and that's the web.

Anyone who uses dark mode can testify as to how jarring it is to come across an application that only supports a bright color scheme. It's especially blinding in low-light environments where dark mode is often used. The same applies to webpages.

To avoid this visual clash, websites should start including a dark color scheme, just like native applications are doing— especially with how much the gap between the two has shrunk. I think this is a substantial user experience improvement for those who have dark mode enabled.

For this website, I decided to use the static site generator Eleventy. There’s a lot to like about Eleventy, such as its support for a variety of templating formats. I’m using mostly EJS for the page structure and Markdown for written content.

I was finding that Eleventy wasn’t robust enough to handle assets like stylesheets the way I wanted, so to resolve this I decided to use gulp.js. The main task compiles and minifies my SASS files and minifies any JavaScript files as well.

One of the nice features of Eleventy is a built-in server which automatically updates whenever template files change. It makes local development a lot easier. I wrote a corresponding gulp task so that any asset files are also rebuilt whenever they are edited.

Finally, to make everything work well together, I have the following scripts defined in my project.json file.

"start": "gulp && (eleventy --serve & gulp watch)"
"build": "gulp && eleventy"