여기요! 따라서 당신이 나와 같고 전체 다크 모드 분위기를 좋아한다면 이를 웹 사이트에 추가하는 것을 고려해 보셨을 것입니다. 약간의 CSS와 JavaScript만 사용하면 설정하기가 매우 쉽습니다. 제가 한 방법은 다음과 같습니다.

1단계: HTML 설정

먼저 사용자가 밝은 모드와 어두운 모드 사이를 전환하기 위해 클릭할 수 있는 버튼이나 스위치가 필요합니다. 이 예에서는 간단한 버튼을 사용했습니다(원하는 경우 아이콘을 사용할 수 있습니다):

Toggle Dark Mode

이 버튼은 모드 전환을 위한 트리거가 될 것입니다.

2단계: 밝은 모드와 어두운 모드를 위한 CSS 추가

다음으로 밝은 모드와 어두운 모드가 어떻게 보일지 정의해야 합니다. CSS에서 기본 스타일(라이트 모드가 됨)을 설정한 다음 이러한 스타일을 재정의하는 다크 모드 클래스를 추가합니다.

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

현재 상황은 다음과 같습니다.

• 라이트 모드(기본값): 본문은 흰색 배경과 검은색 텍스트로 구성됩니다. 모드 전환 시 원활한 전환이 가능하도록 전환 기능을 추가했습니다.
• 다크 모드: .dark-mode 클래스는 배경을 어두운 회색으로 변경하고 텍스트를 흰색으로 변경합니다.

3단계: JavaScript를 사용하여 모드 간 전환

이제 버튼이 실제로 어떤 일을 하도록 만드는 부분이 옵니다. 이 JavaScript 비트는 버튼을 클릭할 때마다 본문의 .dark-mode 클래스를 토글합니다.

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

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

    // Save the user's preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

다음에 분석 내용이 있습니다.

• 클래스 토글: 버튼을 클릭하면 본문의 .dark-mode 클래스가 토글됩니다. 밝은 모드와 어두운 모드 사이에서 스타일이 변경됩니다.
• 기본 설정 저장: localStorage에 사용자 기본 설정을 저장하여 약간의 추가 기능을 추가했습니다. 즉, 어두운 모드를 선택하면 사이트를 떠났다가 다시 돌아오더라도 어두운 모드가 유지됩니다.

4단계: 페이지 로드 시 사용자 기본 설정 로드

사용자가 선호하는 모드로 사이트가 로드되도록 하려면 페이지가 로드될 때 localStorage를 확인하고 그에 따라 모드를 설정해야 합니다.

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
    }
});

React를 사용하는 경우 프로세스는 매우 유사하지만 구성 요소 내에서 작업을 처리하게 됩니다. 방법은 다음과 같습니다.

1. 다크 모드에 대한 상태 및 CSS 클래스 설정:

React의 useState를 사용하여 다크 모드 상태를 관리하고 루트 요소에 적절한 클래스를 적용합니다.

   import React, { useState } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(false);

       const toggleDarkMode = () => {
           setDarkMode(!darkMode);
       };

       return (
           

               
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

이 예에서는:

• darkMode 상태는 다크 모드가 활성화되었는지 여부를 결정합니다.
• toggleDarkMode 기능은 다크 모드를 켜고 끕니다.

1. 다크 모드용 CSS:

이전과 마찬가지로 CSS에 .dark-mode 클래스를 추가하세요.

   body {
       background-color: white;
       color: black;
       transition: background-color 0.3s, color 0.3s;
   }

   .dark-mode {
       background-color: #121212;
       color: #ffffff;
   }

1. 로컬 저장소:

테마 기본 설정을 유지하려면 다음과 같은 작은 조정을 추가할 수 있습니다.

   import React, { useState, useEffect } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(() => {
           const savedTheme = localStorage.getItem('theme');
           return savedTheme === 'dark';
       });

       useEffect(() => {
           localStorage.setItem('theme', darkMode ? 'dark' : 'light');
       }, [darkMode]);

       return (
           

                setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

현재 상황은 다음과 같습니다.

• 초기 상태: darkMode의 초기 상태는 localStorage에 저장된 값을 기반으로 설정됩니다.
• 효과 후크: useEffect 후크는 darkMode가 변경될 때마다 현재 테마 기본 설정을 저장합니다.

그리고 그게 다야! 이는 지나치게 복잡하지 않고 React 앱에 다크 모드를 추가하는 더 간단한 방법입니다.