소개

어두운 모드는 밝은 텍스트와 요소가 있는 어두운 배경을 사용하는 디스플레이 설정입니다. 보기에도 좋고 여러 가지 실용적인 장점도 있어서 인기를 얻었습니다.

어두운 모드의 이점은 다음과 같습니다.

1. 눈의 피로 감소: 어두운 모드는 화면에서 방출되는 밝은 빛의 양을 줄여 특히 저조도 환경에서 눈을 편안하게 해줍니다.
2. OLED 화면의 배터리 수명 향상: OLED(유기발광다이오드) 화면에서 어두운 모드는 검은색 픽셀이 본질적으로 꺼져서 밝은 색상을 표시하는 것보다 전력을 덜 소모하므로 배터리 수명을 절약할 수 있습니다.

이 튜토리얼에서는 CSS와 JavaScript를 사용하여 웹사이트를 다크 모드로 전환하는 방법을 다룹니다. 간단한 밝은 테마의 웹 페이지 템플릿으로 시작해 밝은/어두운 모드를 전환할 수 있는 웹사이트로 변환하여 사용자가 밝은 테마와 어두운 테마를 원활하게 전환할 수 있도록 하겠습니다.

프로젝트 설정

간단한 밝은 테마의 웹페이지 템플릿부터 시작해 보겠습니다. 그런 다음 사용자가 밝은 테마와 어두운 테마 사이를 전환할 수 있도록 밝은/어두운 모드를 전환할 수 있는 웹사이트로 변환할 것입니다.

다크 모드 스타일 구현

색상 선택

첫 번째 단계는 사용 중인 모든 색상을 나열하고 각 색상에 대해 어두운 테마 버전을 선택하는 것입니다. 아래 표에는 페이지의 모든 색상과 해당 어두운 버전이 나열되어 있습니다.

맞춤 변수

그런 다음 CSS 변수를 사용하여 해당 변수로 본문에 어둡고 밝은 클래스를 만듭니다.

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

CSS 사용자 정의 속성 사용에서 CSS 변수에 대해 읽을 수 있습니다. 기본적으로 이는 문서에서 재사용할 값을 저장하는 두 개의 대시(--)를 사용하여 정의된 엔터티입니다. CSS 변수를 사용하면 변경 사항이 자동으로 업데이트되므로 유지 관리가 더 쉬워집니다.

동적 요소 색상

CSS 변수의 값을 삽입하기 위해 var() CSS 함수를 사용합니다. 이렇게 하면 각 변수를 수동으로 변경하는 대신 동적으로 색상을 변경하고 하나의 변수를 업데이트하여 전체 문서의 변경 사항을 반영할 수 있습니다.

다음은 nav 요소와 해당 하위 요소의 예입니다.

body {
  background-color: var(--body-bg);
  color: var(--primary-text);
}

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

JavaScript로 라이트/다크 모드 전환

이제 테마를 전환하기 위해 몸체의 클래스를 어둡거나 밝게 변경할 수 있습니다. 먼저, 헤더에 버튼을 추가하고 클릭 이벤트에 대한changeTheme() 함수를 설정합니다:

본문의 클래스를 전환하는 ChangeTheme() 함수를 정의합니다.

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

이제 사용자는 버튼을 클릭하여 웹사이트의 테마를 변경할 수 있습니다.

아래 CodePen에서 튜토리얼의 코드를 보실 수 있습니다.

다음 단계

또한 사용자의 테마 기본 설정을 로컬 저장소에 저장할 수 있습니다. 선택한 테마를 저장하고 페이지가 로드될 때 확인하도록 ChangeTheme() 함수를 업데이트하면 사용자의 선택이 기억되어 다음 방문 시 자동으로 적용됩니다.

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

색 구성표 추가: 어두움; 어두운 테마에 있을 때 속성을 사용하면 스타일을 지정하기 어려운 일부 요소가 브라우저에 의해 스타일이 변경되도록 할 수도 있습니다.

body.dark {
  color-scheme: dark;
}

결론

결론적으로 웹사이트에 다크 모드를 추가하면 OLED 화면에서 눈의 피로를 줄이고 배터리 수명을 연장하여 사용자 경험을 향상시킬 수 있습니다. 이 가이드를 따르면 CSS 및 JavaScript를 사용하여 밝은/어두운 모드 전환을 쉽게 설정할 수 있습니다. 디자인에 맞게 다크 모드를 맞춤 설정하세요.

구현 내용을 공유하거나 아래 댓글로 질문을 남겨주세요.