본문으로 건너뛰기
실습하기

다크 모드 & 라이트 모드란?

다크 모드와 라이트 모드는 웹사이트나 앱의 테마 또는 스타일 옵션입니다.

  • 라이트 모드: 주로 밝은 배경에 어두운 글씨로 구성됩니다.

  • 다크 모드: 대부분의 배경이 어둡고 글씨나 아이콘이 밝게 표시됩니다. 최근에는 눈의 피로를 줄이고 배터리 소모를 줄일 수 있다는 이유로 많은 앱과 웹사이트에서 인기를 얻고 있습니다.


다크모드를 사용하는 이유​

  1. 눈의 편안함: 밤이나 어두운 환경에서는 밝은 화면이 눈에 불편할 수 있습니다. 다크 모드는 이러한 불편함을 줄여줍니다.

  2. 배터리 절약: 특히 OLED/AMOLED 디스플레이를 사용하는 모바일 장치에서는 다크 모드 사용 시 화면에 표시되는 어두운 픽셀이 더 적은 전력을 소모하기 때문에 배터리 수명을 연장할 수 있습니다.

  3. 개인의 선택: 사용자는 자신의 환경이나 선호에 따라 모드를 선택할 수 있어야 합니다.


웹페이지에서 구현하는 방법​

  1. CSS 변수 사용: 다크 모드와 라이트 모드의 색상 값을 CSS 변수로 저장합니다. 이렇게 하면 모드가 변경될 때마다 변수의 값만 변경하면 됩니다.
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. JavaScript를 통한 전환: 버튼 또는 스위치를 사용하여 사용자가 웹사이트 내에서 직접 모드를 전환할 수 있게 하는 기능을 추가합니다. JavaScript를 사용하여 해당 기능을 구현할 수 있습니다.