어두운 모드와 밝은 모드 전환기는 점점 더 대중화되어 사용자에게 선호하는 시각적 경험을 선택할 수 있는 유연성을 제공합니다. 눈의 피로를 줄이거나, 배터리 수명을 절약하거나, 단순히 개인 취향을 따르기 위해 어둡거나 밝은 모드 전환기를 구현하면 사용자 경험을 크게 향상시킬 수 있습니다. 이 기사에서는 HTML, CSS 및 JavaScript를 사용하여 간단하면서도 효과적인 어두운/밝은 모드 전환기를 만드는 방법을 안내합니다.

다크/라이트 모드를 구현하는 이유는 무엇입니까?

1. 사용자 기본 설정: 일부 사용자는 특히 저조도 환경에서 미적 측면이나 눈의 피로를 줄이기 위해 어두운 모드를 선호합니다.

2. 접근성: 시각 장애가 있는 사용자에게 도움이 될 수 있는 테마를 제공하여 접근성을 향상합니다.

삼. 배터리 절약: OLED 화면에서 다크 모드는 배터리 수명을 절약할 수 있습니다.

HTML 구조 설정

간단한 HTML 구조를 만드는 것부터 시작하세요. 어두운 모드와 밝은 모드 사이를 전환하려면 버튼이 필요합니다.

    

        
Dark/Light Mode Switcher
        Switch to Dark Mode
        
Toggle the button to switch between dark and light modes.
    
    

CSS를 사용한 스타일링

다음으로 어두운 모드와 밝은 모드에 대한 스타일을 정의하겠습니다. 테마 전환을 더 쉽게 하기 위해 CSS 변수를 사용하겠습니다.

/* styles.css */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --button-bg-color: #000000;
    --button-text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    text-align: center;
    margin-top: 50px;
}

button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
    opacity: 0.8;
}

body.dark-mode {
    --bg-color: #333333;
    --text-color: #ffffff;
    --button-bg-color: #ffffff;
    --button-text-color: #000000;
}

JavaScript 기능 추가

이제 테마 전환을 처리하기 위해 JavaScript를 추가하겠습니다. 또한 사용자의 선택 사항이 세션 전반에 걸쳐 유지되도록 사용자의 기본 설정을 localStorage에 저장할 것입니다.

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const switcher = document.getElementById('modeSwitcher');
    const currentMode = localStorage.getItem('theme') || 'light';

    if (currentMode === 'dark') {
        document.body.classList.add('dark-mode');
        switcher.textContent = 'Switch to Light Mode';
    }

    switcher.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        const mode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
        switcher.textContent = mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
        localStorage.setItem('theme', mode);
    });
});

설명

1. CSS 변수: CSS 변수를 사용하여 두 모드의 색상을 정의하여 모드 간 전환을 쉽게 만듭니다.

2. JavaScript: 버튼에 이벤트 리스너를 추가하여 본문 요소의 어두운 모드 클래스를 전환합니다. 또한 현재 모드를 기반으로 버튼 텍스트를 업데이트하고 해당 모드를 localStorage에 저장합니다.

삼. 영구 테마: 페이지가 로드되면 localStorage에서 사용자 기본 설정을 확인하고 적절한 테마를 적용합니다.

결론

어두움/밝음 모드 전환기를 구현하면 다양한 선호도와 조건에 맞는 시각적 옵션을 제공하여 사용자 경험이 향상됩니다. HTML, CSS, JavaScript 몇 줄만 있으면 웹 프로젝트에 이 유용한 기능을 추가할 수 있습니다.

부드러운 전환이나 추가 테마 등 고급 기능을 자유롭게 실험해 보세요. 가능성은 무궁무진하며 사용자는 추가된 유연성을 높이 평가할 것입니다.

즐거운 코딩하세요!