Skip to main content
Practice

What Are Dark Mode & Light Mode?

Dark mode and light mode are theme or style options for websites and apps.

  • Light Mode: Usually consists of dark text on a light background.

  • Dark Mode: Mostly features a dark background with bright text or icons. It has gained popularity in many apps and websites recently due to its potential to reduce eye strain and save battery life.


Why Use Dark Mode?​

  1. Eye Comfort: In low light environments, a bright screen can be uncomfortable. Dark mode helps reduce this discomfort.

  2. Battery Savings: Especially on mobile devices with OLED/AMOLED displays, dark mode can save battery life as dark pixels consume less power.

  3. Personal Preference: Users should have the option to choose a mode based on their environment or preference.


How to Implement Dark Mode on a Webpage​

  1. Using CSS Variables: Store the color values for dark mode and light mode in CSS variables. This way, you only need to update the variable values when switching modes.
CSS
[data-theme='light'] {
  --bg-color: #fff;
  --text-color: #000;
  --text-color-02: #222;
  --text-color-03: #444;
  --brand-color: #ff6;
  --brand-color-02: gold;
}

[data-theme='light'] #light {
  display: none;
}

[data-theme='dark'] {
  --bg-color: #111;
  --text-color: #c3b6a2;
  --text-color-02: #ccc;
  --text-color-03: #777;
  --brand-color: #2d3436;
  --brand-color-02: #5725c6;
}

[data-theme='dark'] #dark {
  display: none;
}
  1. Switching with JavaScript: Add functionality to allow users to toggle modes directly on the website using a button or switch. Use JavaScript to implement this feature.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.