Noir a dark mode friendly Jekyll theme

Introducing Noir

Noir is an automatic dark mode adaptation of the Poole theme for Jekyll.

Noir includes all of the original features from the Poole theme, such as:

  • Complete Jekyll setup included (layouts, config, 404, RSS feed, posts, and example page)
  • Mobile friendly design and development
  • Easily scalable text and component sizing with rem units in the CSS
  • Support for a wide gamut of HTML elements
  • Related posts (time-based, because Jekyll) below each post
  • Syntax highlighting, courtesy Jekyll’s built-in support for Rouge

It goes a step further and adds some awesome things1 which make it even better though. The biggest one? Having automatic dark mode support which, depending on the device’s setting changes the color of the background, text, masthead, headers, blockquotes, lists, inline code, pagination, tables, etc.

Noir also expands upon message blocks by adding some color and style to go along with them plus the ability to add a close button to the block if desired.

Warning! You could use this to warn the reader about something important.

Information: Make this information stand out by putting it in a message block.

Success! If you placed your laptop in boiling water as instructed it should be ruined now.

Danger! If your data backups are in the same physical location it doesn't count!

To include the ability to close the message block just use the following span:

<span class="closebtn" onclick="'none';">&times;</span>

× Hello! Look at me, I'm a special message with a close button.

Noir is developed using and hosted with GitHub. You can head on over to the GitHub repository to download it, report any bugs, and to request features.

Thank you so much for your interest in this theme!

  1. Like this Wikipedia-style highlighting of the currently active footnote.