Skip to main content

Part 2: Light/Dark Mode

This is not really part of the game but it's a nice feature to have. We will add a button to toggle between light and dark mode.

In HTML​

  • In the header component, add a span tag with 🌞/🌙 as the content.
  • Give that span an id of mode-toggle.

In JS​

In the dark-mode-toggle.js file: (make sure to include it in the index.html file)

  • Create a variable reference to the mode-toggle span.
  • Add an event listener to the mode-toggle span to print a message to the console when clicked.
  • Test this by clicking the span and checking the console for the message.
info

🦉: Ultimately, we'll want to toggle the body class property of light-mode. This assumes the game's default will be dark mode.

In CSS​

  • Define the styles for the light-mode class in the styles.css file.
  • define the colors of the light mode such that:
    • Background color: #F5F8FF
    • Text Color: #0B1623
    • Wrong letter color: #FF4D4D
    • Misplaced letter color: #FFCC00
    • Correct letter color: #00CC66
  • Notice how those colors had to be modified in multiple places in the code. When the game code becomes more complex, this will become a maintenance nightmare.

CSS Variables​

This is a good place to use CSS variables. Define the colors using CSS variables.

  • You can learn more about that here: CSS Variables
  • Define the colors using CSS variables. set the root/default colors in the :root selector and the light mode colors in the .light-mode selector.
:root {
  --default: #121213;
  --wrong: #3a3a3c;
  --misplaced: #b59f3b;
  --correct: #538d4e;
  --text-color: #f5f5f5;
}

.light-mode {
  --default: #f5f5f5;
  --wrong: #ff4d4d;
  --misplaced: #ffcc00;
  --correct: #00cc66;
  --text-color: #121213;
}

Back in the JS​

  • Let's modify the event listener to toggle a class light-mode on the body tag when clicked.

Test the game to see if the colors change when you click the mode toggle button.