BlinkWiki has Night Mode

Posted by admin at January 6, 2021

I originally developed this website using the Svbtle homepage or dcurtis theme – black text on white background with an emphasis on large clear fonts. I have been fascinated with dark themes since its popularity in early 2010s. So I added a Night Mode modification to this site. To activate it, simply click on sun on the top right corner. The files used in this exercise are available on the BlinkWiki Github.

The page loads with a default theme and a default icon, I choose the default theme to Day thereby making the default icon the moon. This means, the sun ion should be hidden. You can choose to switch the default themes and icons, but ensure they are opposites – Day theme, Night icon or Night theme, day icon, this way the user gets a result and sees a button that delivers the opposite of the current result.

For the Sun and Moon icons, download fontawesome version 4 from www.fontawesome.com. In the head tags, add the following code to include fontaweome to the site.

<head>
      ...
      <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css" />
      ...
</head>

Next, add the icons to the markup. In the body of the html document, locate the appropriate section in navigation bar and place the following code.

<body>
        ...
        <!--night theme switch: default icon-->
        <span id="night-theme"
        >
            <!--moon icon-->
            <i class="fa fa-moon-o" aria-hidden="true"></i>
        </span>
        
        <!--day theme switch-->
            <!--hide the switch with the hidden property-->
        <span id="day-theme" hidden>
            <!--moon icon-->
            <i class="fa fa-sun-o" aria-hidden="true"></i>
        </span>
        ...
</body>

The above is HTML markup for the switch widget – two buttons, one hidden and one shown. You can choose to hide a button using the hidden property as shown above or using a CSS class as shown below.

.null {display:none;}

And since we are talking CSS, lets define the CSS files. The aim is separate the theme styles (background and font colors) from the structure styles (font sizes, panels sizes and locations, grid etc). Save the structure styles in a separate css, named structure.css (or something appropriate).

Next save the theme styes to another file day.theme.css. This is the default theme of the page “day-theme.css”. The file should look something like this:


/**
* Day Theme CSS File
*/
body {
    /* light background */
    background: #fff;
    /* dark font */
    color: #000;
}

Create the inverse theme, “night-theme.css”


/**
* Night Theme CSS File
*/
body {
    /* dark background */
    background: #000;
    /* light font */
    color: #fff;
}

Include two css files into the head tag

The first for the structure and the second for the default theme which will serve as the theme toggle. The aim is to use JS to toggle the href property of this link from day mode to night mode and vice versa. The head tag should now be modified as shown below:

<head>
        ...
        <!--font awesome-->
        <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css" />
        ...
        <!--theme selector loaded with the default theme: Day-->
        <link
            <!-- ensure the ID is specified-->
            id="theme-link"
            rel="stylesheet"
            <!-- ensure the default theme is specified here-->
            href="./css/day-theme.css"
        />
        ...
</head>

Notice that the second link tag has an identifyer. JS would this to maniputate the DOM.

Next, we add some JS:

We create the toggleTheme function:

What we have above is just a simple toggle function that uses two methods for determining the CSS file to use for the theme link tag. When a mode parameter is supplied the mode is set as indicate, day theme and icon for “day” and night theme and icon for “night”.

Then use the toggleTheme function as the event listner for the two switch buttons

Now, clicking on the default icon (moon) should toggle the theme to night mode. However, the moon icon remains visible, instead of switching to sun.

Hence, we modify the toggleTheme to display the right icon for the right theme.

That should do it, the theme is toggled and the icons as well. If the page does not toggle the theme properly, then a few hard reloads should load the new css setup for the page.

Next we have to take a look at persistence. At this point every time the page is reloaded, the defaul theme is enabled. We would prefer to maintain the last theme we choose.

I love localStorage for simple tasks like these. The plan is to set a property everything toggleTheme is run and recall this property every time the page is reloaded.

So we go back to the toggleTheme function

Now for the recall on reload

   0 likes

Suggested Read