CSS로 다크모드(라이트모드) 구현하는 방법 2가지

@media (prefers-color-scheme)

prefers-color-scheme CSS 미디어 기능은 사용자가 시스템 환경 설정에서 밝은 색상 테마 또는 어두운 색상 테마를 요청했는지 감지하도록 설계되었습니다. 이를 통해 개발자는 사용자의 선호 테마에 맞게 웹사이트 또는 애플리케이션의 모습을 자동으로 조정할 수 있습니다.

prefers-color-scheme 사용하기

이 미디어 기능은 세 가지 값을 지원합니다:

• no-preference: 사용자가 테마 선호도를 지정하지 않았음을 나타냅니다. CSS에서는 불리언 컨텍스트에서 false로 평가됩니다.
• light: 사용자가 밝은 배경에 어두운 텍스트를 특징으로 하는 밝은 테마를 선호한다고 나타냅니다.
• dark: 사용자가 어두운 배경에 밝은 텍스트를 특징으로 하는 어두운 테마를 선호한다고 나타냅니다.

다음은 어두운 테마를 구현하는 기본 예시입니다:

@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

이 설정을 개선하기 위해 :root 선택자를 사용하여 기본 테마를 정의하고 밝은 모드와 어두운 모드 모두에 대한 색상 체계를 지정하세요:

:root {
    color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --text-color: #213547;
    --background-color: #ffffff;
  }

  a:hover {
    color: #747bff;
  }

  button {
    background-color: #f9f9f9;
    color: var(--text-color);
  }
}

테마 수동 토글하기

자동 테마 감지가 유용하긴 하지만, 사용자가 수동으로 테마를 전환할 수 있는 방법을 제공하는 것이 좋습니다. 이는 루트 요소에 클래스를 토글하는 JavaScript를 통해 달성할 수 있습니다:

function toggleTheme() {
  const root = document.documentElement;
  root.classList.toggle('dark-theme');
}

수동으로 설정된 어두운 테마에 대한 해당 CSS는 다음과 같이 보일 수 있습니다:

.dark-theme {
  --background-color: #333;
  --text-color: #ccc;
  --link-color: #5599ff;
}

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

a {
  color: var(--link-color);
}

이 접근 방식은 사용자가 시스템 설정을 재정의하거나 애플리케이션 내에서 테마를 전환할 수 있도록 하여 전반적인 사용자 경험을 향상시킵니다.