웹사이트에 다크 모드를 쉽게 추가하는 방법

안녕하세요! 따라서 당신이 나와 같고 어두운 모드의 분위기를 좋아한다면 웹 사이트에 추가하는 것을 고려해 보셨을 것입니다. 약간의 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 앱에 다크 모드를 추가하는 더 간단한 방법입니다.

위 내용은 웹사이트에 다크 모드를 쉽게 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!