Implementing a dark theme in jekyll

So breaking this down:

  • As you are using a static site generator, you can only apply the dark or light theme once a small piece of Javascript executes to determine and set the theme.
  • This is resulting in some delay/flash of content as the Javascript executes.

I think using a static site generator means that reading from localStorage and applying a theming class with Javascript is a perfectly good approach. As I see it, there are two possible approaches to minimising the flashing issue that don't involve changing the architecture away from a Jekyll site.

Execute the Javascript sooner, as the page content is loading:

Because the only DOM element that needs to have loaded is the <html> element itself, to which you can apply a theme class, you could put your 'critical' Javascript in a small script tag inside the <head>. i.e. just the 'theme-switching' line of code.

It should then execute straight away before the content loads.

Use CSS transitions to minimise the flash itself:

You could hide the page content while the <html> element has no theming class, and fade it in once one is applied like so:

html {
    opacity: 0;
    transition: opacity 1s;
}

html.light, html.dark {
    opacity: 1;
}

What you want, according to point 3,

Implement some kind of fade in/fade out when changing the visibility from hidden to visible

is --

CSS Transitions

Example usage to show ease-in effect whenever a CSS property change:

body {
  transition: background 1s ease-in, color 1s ease-in;
}
.dark {
  color: white;
  background: black;
}
<body>

  <p> Lorem Ipsum dolor sit amet... </p>

  <button onclick="document.body.classList.toggle('dark')">Change Theme</button>

</body>

Tags:

Javascript

Html

Css

Fouc

Recent Posts