Hey bloggers!

If you are on this page, chances are you are interested in implementing dark mode into your website. What you see now is an example of Dark Mode being used on a Github fastpages build. It is a very simple addition that can help personalize your site.

Original Blog Post

Guide

  • Navigate to the style directory in your code editor. This is by default stored in _sass/minima. Example minima folder
  • Create a file in this directory for your dark mode styling. Name it whatever you want, but for this guide I named it dark-mode.scss. Make sure you use the scss file suffix! Example dark mode file
  • If you would like to use the default dark mode template, copy the code from this file and paste it into your dark mode file.
  • Navigate to the custom styles file in your text editor folder. By default, it is named custom-styles.scss Example Custom Styles File
  • Under the comment, import your dark mode file. Example import statement 
/*-----------------------------------*/

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

@import "minima/dark-mode";

Credit to this blog post here for the information.

Example repository that has dark mode implemented

Further your Knowledge

Dark mode is cool and all, but why not take it a step further? See if you can figure out how to toggle the import statement on and off to make a toggleable theme set. Try editing the dark mode file to mess around with the shades/colors of your dark mode settings to make it as personalized as you can. Be creative and innovative!