In the previous article, we set up our starter code in
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.
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.
white when in dark mode and
black in light mode).
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.
If localStorage has a previously used theme, use it
Else use the system theme
Always save theme to localStorage at page load and on theme change
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
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
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.
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.