몇 분 만에 웹사이트 다크 모드를 준비하세요

앱에서 다크 모드를 원하는 사용자가 80% 이상이므로 웹 애플리케이션에 어두운 모드를 구현하기에 이보다 더 좋은 때는 없습니다...

하지만 걱정하지 마세요. CSS를 다시 작성하거나 다양한 어려운 학습 과정을 거치기 위해 많은 노력을 기울일 필요는 없습니다.

단 15분 안에 귀하의 사이트에 다크 모드 지원을 통합하는 방법을 알려드리겠습니다(네, 정말입니다).

이 튜토리얼이 끝나면 시스템을 인식하고 사용자에게 깊은 인상을 줄 수 있는 우아한 다크 모드를 갖게 될 것입니다.

시스템 수준 다크 모드 이해

최근 다크 모드의 가장 인상적인 점은 처음부터 복잡한 테마 전환기를 만들 필요가 없다는 점입니다.

최신 OS는 이미 사용자의 요구 사항을 처리하고 있으며 브라우저는 CSS를 통해 이를 쉽게 수행합니다.

Prefers-color-scheme이라는 미디어 쿼리를 통해 놀라운 일이 일어납니다. 다음과 같습니다:

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

따라서 사용자가 시스템에서 어두운 모드 스위치를 활성화할 때마다 기본적으로 이 미디어 쿼리가 활성화됩니다.

이를 통해 웹사이트 스타일이 사용자의 선호도에 따라 자동으로 조정됩니다.

좋은 점은 대부분의 최신 브라우저가 이 기능을 기본적으로 지원한다는 것입니다. Chrome, Firefox, Safari, Edge 등이 모두 포함되어 있습니다...

즉, 추가 JavaScript나 복잡한 로직 없이 시스템 수준 기본 설정을 활용할 수 있습니다.

재미있는 부분을 살펴보겠습니다. 실제로 이를 코드에 구현해 보겠습니다.

빠른 구현 방법

즉시 살펴보겠습니다. 가장 먼저 해야 할 일은 CSS에서 색상 변수를 설정하는 것입니다. 방법은 다음과 같습니다.

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

이제 색상을 하드 코딩하는 대신 해당 변수를 사용하겠습니다. 이렇게:

body {
  background-color: var(--background);
  color: var(--text);
}

.card {
  background-color: var(--surface);
}

.button {
  background-color: var(--accent);
}

말 그대로 그렇습니다! 이제 귀하의 웹 사이트는 사용자 시스템 기본 설정에 따라 밝은 모드와 어두운 모드 간에 자동으로 전환됩니다. JavaScript가 필요하지 않으며 지저분한 논리도 없습니다. 깔끔하고 간단한 CSS입니다.

빠른 팁: 기본 색상부터 시작하여 브랜드에 맞게 조정하세요. 처음에는 너무 걱정하지 마세요. 나중에 언제든지 돌아와서 조정할 수 있습니다.

고급 터치

위 코드를 사용하면 웹사이트가 완벽하게 작동해야 하지만 다크 모드 구현을 정말 전문적으로 만들기 위해 좀 더 다듬어 보겠습니다.

이러한 조정은 단 몇 분 밖에 걸리지 않지만 엄청난 변화를 가져옵니다.

먼저 모드 스위치가 흔들리지 않도록 부드러운 전환을 추가하세요.

:root {
  --background: #ffffff;
  --text: #333333;
  /* Add this line */
  transition: background-color 0.3s ease, color 0.3s ease;
}

이미지, 특히 로고의 경우 우아하게 처리하려면 다음 미디어 쿼리를 추가하세요.

@media (prefers-color-scheme: dark) {
  img {
    /* Slightly dim non-essential images */
    opacity: 0.8;
  }

  /* But keep logos crisp */
  .logo {
    opacity: 1;
    filter: brightness(1.2);
  }
}

테마 토글 버튼 추가

시스템 기본 설정을 재정의하려는 사용자를 위해 수동 테마 전환기를 추가해 보겠습니다.

전체 구현은 다음과 같습니다.

먼저 토글 버튼에 다음 HTML을 추가하세요.

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

모든 기능을 작동시키는 JavaScript는 다음과 같습니다.

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

이 코드는 다음과 같은 전환 가능한 버튼을 제공합니다.

• 기본적으로 사용자의 시스템 환경설정을 존중합니다
• localStorage에 수동 기본 설정을 저장합니다
• 페이지를 다시 로드해도 지속됩니다
• 현재 테마에 따라 해/달 아이콘 표시
• 모드 간 원활한 전환

전문가 팁: 자유롭게 아이콘을 맞춤설정하세요. SVG를 사용하거나 더욱 정교한 스위치 디자인을 만들 수도 있습니다. 현재 테마가 무엇인지 명확하게 확인하세요!

결론

자, 이제 귀하의 사이트에 전문적으로 제작된 완벽하게 작동하는 어두운 모드 기능이 있습니다!

시스템 인식 테마, 부드러운 애니메이션, 올바른 이미지 렌더링, 멋진 토글 버튼까지 갖추고 있습니다.

첫날 모든 것을 완벽하게 할 필요는 없습니다. 기억하세요.

노출 없이 구현하고, 푸시하고, 사람들이 사이트를 사용할 때마다 변경하세요.

사용자는 다크 모드가 제대로 작동하지 않을 때에도 다크 모드를 받을 수 있어 기뻐할 것입니다.

위 내용은 몇 분 만에 웹사이트 다크 모드를 준비하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!