CSS 다크/라이트 모드 전환기 만들기-CSS 튜토리얼-php.cn

CSS 다크/라이트 모드 전환기 만들기

WBOY

풀어 주다： 2024-07-16 13:28:17

원래의

546명이 탐색했습니다.

Creating a CSS Dark/Light Mode Switcher

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

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

1. 사용자 선호도: 일부 사용자는 특히 저조도 환경에서 미관을 고려하거나 눈의 피로를 줄이기 위해 다크 모드를 선호합니다.

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

3. 배터리 절약: OLED 화면에서는 다크 모드를 사용하여 배터리 수명을 절약할 수 있습니다.

HTML 구조 설정

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark/Light Mode Switcher</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Dark/Light Mode Switcher</h1>
        <button id="modeSwitcher">Switch to Dark Mode</button>
        <p>Toggle the button to switch between dark and light modes.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

로그인 후 복사

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);
    });
});

로그인 후 복사