I have come to talk with you again, this time for my fastpages blog.

fastpages gets a lot of things right for someone who uses Jupyter notebooks and wants to get into blogging. Prashanth Rao’s article does a great job of making the case for that.

But why?

However, being a long time user of the Dark Reader browser extension, it was unusual to not have widespread dark mode support on many Jekyll themes, one of which fastpages is built on. Therefore, I decided to bring back the dark mode experience in this post.

I personally prefer dark mode to light as it causes lesser strain on the eyes. It also helps illuminate content while the background fades away. For someone who spends a good part of the day stuck behind a screen, I’ve made it a point to keep the bright light intake for outdoors.

Since I have not dabbled in designing dark mode experiences before, I plan to keep this process simple and understandable. We shall be using a bunch of simple css rules while following Material Design dark theme guidelines (mostly).

Here’s the sample fastpages sample blog post without Dark mode:

And here’s the same one with dark mode enabled!

Pretty cool, yeah? Let’s check out the code now.

If you’re in a hurry to join the dark side, feel free to scroll to the end of this post and download the dark mode stylesheet.

If your curious about the design choices I’ve made and would like to customize for yourself, stick with me here.

Colour palette

Let’s start with defining our palette.

$high-emph: rgba(white, 0.87); // Colour 1 -> White
$med-emph: rgba(white, 0.69); //Noice
$low-emph: rgba(white, 0.38);
$dark-grey : #121212; // Colour 2
$overlay: mix($dark-grey, white, 95%);
$overlay-light: mix($dark-grey, white, 86%);

That’s it. Two colours and their shades.

  • Baseline dark-grey theme colour which is recommended by Material design and lighter variants of it for components such as code blocks and tables.
  • Shades of white for different levels of emphasis of text. 1

This also gives us the flexibility to choose our own primary dark color. For eg, if we change the value of dark-grey to that of something like deep-purple (#1F1B24). Voilà, we get the following palette:

and theme:

The palette can be easily customized to support your own favorite dark colour!

The little things that matter

The rest of the stylesheet is more or less straightforward. Here are some additional quirks that I thought were cool:

  • Don’t forget to turn over your faithful scrollbar to the dark side
* {
    scrollbar-color: $dark-grey $overlay-light;
}

  • You can invert the colour of your charts and plots to keep that dark consistency going.
canvas {
    filter: invert(100%);
}

Psst, Check out the dark graphs in action here.

  • We also got some dark tables in the house babyy 👾
table th {
    background-color: $overlay;
    border-color: $overlay-light;
    color: $high-emph;
}

table td {
    background-color: $dark-grey;
    border-color: $overlay-light;
    color: $med-emph;
}

Show me the money (code)

You can get the stylesheet from this Github gist here. Save it to _sass/minima and add this import line in custom-styles.scss.

/*-----------------------------------*/
/*----- ADD YOUR STYLES BELOW -------*/

@import "minima/dark-mode";

That’s it! fastpages finally has the power of the dark side.

Enjoy ⚡

Footnotes

  1. More on maintaining text legibility while deciding colour here