One feature I love in some iOS apps is automatic switching between light and dark colour themes based on time of day. Nice dark theme at night so my retinas aren’t scorched off and a light theme during the bright day light. Best idea ever.

So why can’t I do the same with a website?

Actually it’s not too hard, you just need two different sets of CSS (a night one and a day one) and a little bit of Javascript to swap them out based on the current time.

At this point the smarter ones will be saying “hmmm, maintain two different sets of CSS with dozens of color declarations? How about no?”

Fortunately Jekyll has built in support for SASS so you don’t have to endure that nightmare. In fact a default Jekyll site has almost everything you need setup already. The site CSS starts with css\main.scss file that defines a bunch of variables for colours and a few other things then imports the other .scss files from _sass/ that setup all the other styling.

Create two site themes

Make a copy of main.scss, name it main-night.scss, and update the colour variables in main-night.scss to be the dark theme. Now your site will produce a main.css and a main-night.css that are identical except for the colours.

There is one color value in _sass\_base.scss. It’s for the background of pre and code. Add a variable for this color in main.scss and main-night.scss and update _base.scss accordingly.

$code-bg-color: #eef;
pre,
code {
  font-size: 15px;
  border: 1px solid $grey-color-light;
  border-radius: 3px;
  background-color: $code-bg-color;
}

Add Javascript

Update the <link> tag from _includes/head.html to have an id so you can refer to it more easily with Javascript.

<link id='stylesheet' rel='stylesheet' href='{{ "/css/main.css" | prepend: site.baseurl }}'>

Then you need to add some Javascript to switch between main.css and main-night.css. I just added this in a <script> tag right at the end of <head> in _includes\head.html.

var isNight = function(){
  var date = new Date();
  var current_hour = date.getHours();
  if (current_hour > 18 || current_hour < 7){
    return true;
  }
  return false;
}

var css = document.getElementById('stylesheet');

if (isNight()){
  css.href = '/css/main-night.css';
}else{
  css.href = '/css/main.css';
}

If you don’t post source code samples on your blog then you are done. If you do however, then it gets a little tricky at this point.

Fix syntax highlighting

Jekyll’s integrated syntax highlighting for code samples relies on colours defined in _sass\_syntax-highlighting.scss. Twenty three different colours are used in this file and they aren’t defined as reusable variables.

You have a couple of options here:

  1. If the default colours work for both your day and night themes then leave them as is. You might want to tweak the background colour as per the variable you had to create for pre and code above.
  2. You could refactor the colours from the _syntax-highlighting.scss to be declared as variables in main.scss/main-night.scss.
  3. Use a different syntax highlighting system entirely and set it up as you want.

I actually use highlight.js. I include it and two themes, a light one and a dark one. Then I switch between the stylesheets the same time as the main CSS.

<link id="highlightcss" rel="stylesheet" href="/highlightjs/tomorrow.css">
<script src="/highlightjs/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>

and then update the Javascript from above to switch them.

if (isNight()){
  css.href = '/css/main-night.css';
  highlightcss.href = '/highlightjs/tomorrow-night.css';
  }else{
    css.href = '/css/main.css';
    highlightcss.href = '/highlightjs/tomorrow.css';
  }

If you want to checkout exactly how I did all this for this blog you can see the Jekyll source here: https://github.com/dmison/dmison.github.com