CS Portfolio Redesign — Part 2: Adding a dark mode toggle

In the previous article, we set up our starter code in index.html and styles.css to organize the website into different sections. In this article, we will go over some more advanced CSS and JS techniques to enable a color mode toggle and ensure design consistency across light mode and dark mode.

CSS

First we need to define some custom properties (aka CSS variables) within our CSS that will change whenever we toggle the color mode.

In the rest of our CSS code, we can reference these values using var(variable-name) which will correspond to a different value based on what theme is set to (i.e. var(--text-color) is white when in dark mode and black in light mode).

The theme is a document attribute of the root element that we can set in our javascript code.

The main two colors that we need to change are the text color and the background color, which for simplicity we just swap between black and white. I also included a link-hover-color and a background-color-hover variable based on personal preference. The link-hover-color switches between two shades of blue for hovering over links. The background-color-hover switches between two shades of grey that we will use later on to style our project cards.

Javascript

Before we start writing in javascript, we need to figure out the logic of the color mode toggle. What I want is for the first page load to be determined by the system color mode, and then future page loads are determined by whatever the user set. In pseudocode:

Note: if you store data in localStorage, it will persist even when the user closes the tab or browser. This means that it does not get automatically cleared until your website or the user does so.

Note: remember to add <script src=”colors.js” defer></script> to the head of index.html

Awesome! Now readers can switch to their preferred color mode as they browse through the webpage.

Styling the color mode button

The ‘color mode’ button now has the correct functionality, but it still looks rather pedestrian in its visual design. I found the svg’s for a moon icon and sun icon online, so I want the button to switch between the two icons whenever the color mode is toggled. The code for this section was motivated by a great article written by Ryan Feigenbaum.

First, let’s replace the ‘color mode’ button in our navbar with two new buttons that contain svg’s instead of text.

We keep the color-mode-toggle class and add two new classes called dark-hidden and light-hidden for each button. The idea is that we only one of these buttons to exist at any point in time, so we apply display: none (which hides the element) based on the current color mode. I also added some more styling changes to the button based on my personal preference.

With these changes, the button style now matches the webpage’s minimalist theme.

Conclusion

In this article, we first added the functionality for our website to switch between dark mode and light mode. We then restyled our button to display sun and moon icons that change with the color mode instead of a static text button. In the next article, we will start adding content to the projects section and use bootstrap to design the project cards.