몇 분 만에 웹사이트 다크 모드를 준비하세요-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

Linda Hamilton

Dec 27, 2024 pm 02:09 PM

Make Your Website Dark Mode Ready in Minutes

앱에서 다크 모드를 원하는 사용자가 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;
  }
}

로그인 후 복사

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