Guidelines
Practice
다크 모드 & 라이트 모드란?
다크 모드와 라이트 모드는 웹사이트나 앱의 테마 또는 스타일 옵션입니다.
-
라이트 모드: 주로 밝은 배경에 어두운 글씨로 구성됩니다.
-
다크 모드: 대부분의 배경이 어둡고 글씨나 아이콘이 밝게 표시됩니다. 최근에는 눈의 피로를 줄이고 배터리 소모를 줄일 수 있다는 이유로 많은 앱과 웹사이트에서 인기를 얻고 있습니다.
다크모드를 사용하는 이유
-
눈의 편안함: 밤이나 어두운 환경에서는 밝은 화면이 눈에 불편할 수 있습니다. 다크 모드는 이러한 불편함을 줄여줍니다.
-
배터리 절약: 특히 OLED/AMOLED 디스플레이를 사용하는 모바일 장치에서는 다크 모드 사용 시 화면에 표시되는 어두운 픽셀이 더 적은 전력을 소모하기 때문에 배터리 수명을 연장할 수 있습니다.
-
개인의 선택: 사용자는 자신의 환경이나 선호에 따라 모드를 선택할 수 있어야 합니다.
웹페이지에서 구현하는 방법
- 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; }
- JavaScript를 통한 전환: 버튼 또는 스위치를 사용하여 사용자가 웹사이트 내에서 직접 모드를 전환할 수 있게 하는 기능을 추가합니다. JavaScript를 사용하여 해당 기능을 구현할 수 있습니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help