본문으로 건너뛰기

Dark Mode and Light Mode

What are Dark Mode & Light Mode?

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

  • Light Mode: Typically consists of a bright background with dark text.

  • Dark Mode: Most of the background is dark with text or icons displayed in light colors. Recently, it has gained popularity in many apps and websites due to its ability to reduce eye strain and save battery life.


Reasons to Use Dark Mode

  1. Eye Comfort: In the night or dark environments, bright screens can be uncomfortable for the eyes. Dark mode helps to reduce this discomfort.

  2. Battery Saving: Especially on mobile devices using OLED/AMOLED displays, dark mode consumes less power for the dark pixels displayed, thereby extending battery life.

  3. Personal Choice: Users should be able to choose the mode based on their environment or preference.


Implementing on Web Pages

  1. Use of CSS Variables: Store the color values for dark and light modes in CSS variables. This way, only the values of the variables need to be changed when the mode changes.
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. Transition through JavaScript: Add functionality that allows users to switch modes directly within the website using a button or switch. This functionality can be implemented using JavaScript.