웹사이트에 다크 모드를 추가하는 가장 쉬운 방법-JS 튜토리얼-php.cn

웹사이트에 다크 모드를 추가하는 가장 쉬운 방법

WBOY

풀어 주다： 2024-07-29 04:46:23

원래의

552명이 탐색했습니다.

The Easiest Way to Add Dark Mode to Your Website

최근 몇 년간 다크 모드에서 웹사이트와 애플리케이션을 사용하는 기능이 인기를 끌었습니다. 눈의 피로를 덜어주고, OLED 화면 장치의 배터리 수명을 연장하며, 전통적인 조명 테마를 미학적으로 만족스러운 대체물로 제공합니다. 이 튜토리얼에서는 JavaScript를 사용하여 테마를 전환하고 CSS 변수를 사용하여 웹사이트에 다크 모드를 추가하는 방법을 보여줍니다.

1단계: HTML 설정

먼저 기본 HTML 구조부터 시작해 보겠습니다. 다음 내용으로 index.html 파일을 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to Dark Mode Tutorial</h1>
        <button id="theme-toggle">Toggle Dark Mode</button>
    </header>
    <main>
        <p>This is a sample website to demonstrate dark mode implementation.</p>
    </main>
    <script src="script.js"></script>
</body>
</html>

로그인 후 복사

이 HTML 파일에는 제목이 있는 헤더와 어두운 모드를 전환하는 버튼, 일부 텍스트가 포함된 기본 콘텐츠 영역, CSS 및 JavaScript 파일에 대한 링크가 포함되어 있습니다.

2단계: CSS 변수 정의

이제 CSS에서 변수를 정의해 보겠습니다. 다음 내용으로 styles.css 파일을 만듭니다.

:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --header-background-color: #f1f1f1;
}

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

header {
    background-color: var(--header-background-color);
    padding: 20px;
    text-align: center;
}

button {
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
}

.dark-mode {
    --background-color: #181818;
    --text-color: #ffffff;
    --header-background-color: #242424;
}

로그인 후 복사

:root를 사용하여 이 CSS 파일에서 CSS 변수 그룹을 정의합니다. 조명 모드의 경우 이러한 변수는 배경색, 텍스트 색상 및 헤더 배경색을 결정합니다. 또한 .dark-mode 클래스가 정의되어 있으며 해당 설정이 이러한 변수보다 우선합니다. body 요소의 전환 속성을 통해 테마 간 원활한 전환이 보장됩니다.

3단계: 테마 전환을 위한 JavaScript 추가

이제 테마 전환을 처리하는 JavaScript를 추가해 보겠습니다. 다음 콘텐츠로 script.js 파일을 만듭니다.

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved user preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    body.classList.add(savedTheme);
}

// Toggle dark mode
themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save user preference
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark-mode');
    } else {
        localStorage.removeItem('theme');
    }
});

로그인 후 복사

이 스크립트는 테마 토글 버튼과 본문 요소를 선택합니다. 버튼을 클릭하면 본체의 다크 모드 클래스가 토글됩니다. 또한 스크립트는 사용자의 테마 기본 설정을 localStorage에 저장하므로 페이지를 다시 로드해도 테마가 유지됩니다.