Tailwind CSS 및 CSS 변수를 사용한 다크 모드 및 야간 모드

다크 모드와 나이트 모드는 현대 웹사이트의 필수 기능입니다. 접근성을 향상시키고 사용자가 선호하는 모양을 선택할 수 있는 유연성을 제공합니다. Tailwind CSS 및 CSS 변수를 사용하여 이 기능을 구축하는 방법을 자세히 살펴보겠습니다.

Tailwind CSS 및 CSS 변수가 잘 작동하는 이유

• CSS 변수: 다양한 테마의 색상 관리를 단순화합니다.
• 부모 클래스: 단일 부모 클래스를 전환하여 테마를 전환합니다.
• JavaScript 통합: 최소한의 작업으로 테마를 동적으로 업데이트합니다. 노력하세요.

CSS 변수를 사용하여 테마 색상 설정

테마 색상을 정의하는 것부터 시작하세요. 이러한 CSS 변수는 테마 전환을 쉽게 하기 위해 상위 클래스 내에 있습니다.

/* Light Theme (Default) */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

/* Dark Theme */
.theme-dark {
  --bg-color: #000000;
  --text-color: #ffffff;
}

/* Solarized Theme */
.theme-solarized {
  --bg-color: #002b36;
  --text-color: #839496;
}

Tailwind 클래스에서 CSS 변수 사용

Tailwind를 사용하면 스타일 지정에 CSS 변수를 쉽게 사용할 수 있습니다.

<div>



<h2>
  
  
  Adding JavaScript for Dynamic Theme Switching
</h2>

<p>Here’s the JavaScript to handle theme changes dynamically:<br>
</p>

<pre class="brush:php;toolbar:false">const themeSelect = document.getElementById("theme-select");
const rootElement = document.documentElement;

// Listen for dropdown changes
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;

  // Remove all theme classes
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");

  // Add the selected theme class
  rootElement.classList.add(selectedTheme);
});

// Set default theme on load
window.addEventListener("DOMContentLoaded", () => {
  rootElement.classList.add("theme-light");
});

실시간 테마 전환 실행

사용자가 드롭다운에서 테마를 선택하면 배경과 텍스트 색상이 즉시 변경됩니다. 이 동적 업데이트를 통해 원활하고 상호 작용적인 경험을 할 수 있습니다.

이 접근 방식이 뛰어난 이유

• 확장성: 추가 CSS 변수를 정의하여 새로운 테마를 추가하세요.
• 깨끗한 분리: CSS가 테마를 처리합니다. JavaScript는 로직을 관리합니다.
• 성능: CSS 변수는 업데이트를 원활하고 효율적으로 만듭니다.

LocalStorage를 사용하여 테마 기본 설정 저장

선택한 테마를 저장하여 세션 전반에 걸쳐 지속되도록 하여 한 단계 더 발전시키세요.

// Save the theme
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");
  rootElement.classList.add(selectedTheme);
  localStorage.setItem("theme", selectedTheme);
});

// Load the saved theme
window.addEventListener("DOMContentLoaded", () => {
  const savedTheme = localStorage.getItem("theme") || "theme-light";
  rootElement.classList.add(savedTheme);
});

다크 모드 및 야간 모드에 대한 추가 팁

• 추가 테마: 고대비 테마 또는 사용자 정의 사용자 정의 테마를 추가하세요.
• 전환: 배경 및 텍스트 색상을 부드럽게 변경하려면 CSS 전환을 사용하세요.
• 접근성: 테마 전환기가 키보드 및 스크린 리더와 잘 작동하는지 확인하세요.

Tailwind CSS 및 CSS 변수를 사용하면 동적 다크 모드 또는 야간 모드를 만드는 것이 간단하고 효율적입니다. 직접 사용해보시고 이것이 웹사이트의 사용자 경험을 어떻게 변화시키는지 확인해 보십시오!

위 내용은 Tailwind CSS 및 CSS 변수를 사용한 다크 모드 및 야간 모드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!