다크 모드: 색상 반전만큼 간단하지 않음

소개

개발자와 사용자 모두가 좋아하는 다크 모드. 오늘 우리는 웹 애플리케이션에서 다크 모드를 구현하는 방법을 살펴볼 것입니다. 항상 그렇듯이 JavaScript 사용을 포함하여 이를 수행하는 방법에는 여러 가지가 있지만 오늘날에는 엄격하게 CSS를 사용하고 있습니다.

시작하기

시작하기 전에 애플리케이션에서 다크 모드를 구현하는 것이 무엇을 의미하는지 이야기해 봅시다. 어두운 모드의 자연/기본 해석은 색상 반전에 불과하다는 것을 알았습니다. 즉, 어두운 텍스트를 밝게 만드는 동안 밝은 배경을 어둡게 만듭니다. 하지만 그렇게 간단하지 않다는 것을 깨달았습니다. 내가 틀릴 수도 있지만 그건 내 해석일 뿐이야.

일반적으로 "밝은"설정에서 깊이를 만드는 방법은 그림자를 사용하여 카드 구성 요소와 같은 콘텐츠를 배경에서 눈에 띄게 만드는 것입니다. "어두운"설정에서 이 트릭을 사용하면 대부분 매우 이상하게 보이고 UI에 산만함을 더합니다. 같은 방식으로 생생하고 매우 대조적인 색상을 사용하면 "밝은 설정"에서는 잘 작동하지만 어두운 설정에서는 잘 작동하지 않습니다. 어두운 모드에서 깊이를 만들려면 구성 요소와 배경 사이에 채도가 낮은 밝은 색상을 사용하여 분리 정도를 만드는 방법을 생각할 수 있습니다. 따라서 응용 프로그램에 다크 모드를 추가할 때 두 모드에 대한 색상을 선택하는 것이 매우 중요합니다.

다크 모드 구현

하루가 끝나면 어두운 모드가 선호되며 일부 사용자는 어두운 테마를 선호하지 않을 수 있으므로 사용자에게 선택권을 주는 방법을 원할 것입니다. 다행스럽게도 css는 개발자가 사용자가 선호하는 테마 유형을 알 수 있는 방법을 제공합니다. 이것은 다음을 사용하여 수행됩니다.

@media (prefers-color-scheme);

이것은 브라우저에서 널리 지원되는 CSS 미디어 기능이며 사용자가 밝은 테마를 선호하는지 또는 어두운 테마를 선호하는지 감지하는 데 사용됩니다. 보다 구체적으로 이것은 사용자가 설정한 장치 색 구성표 기본 설정을 확인하여 수행됩니다.
@media (prefers-color-scheme)는 Initial , light 또는 dark 세 가지 값 중 하나를 사용합니다. 이러한 매개변수가 지정되지 않은 경우 기본적으로 initial이 선택됩니다. 밝게 설정하면 사용자가 밝은 테마를 선호한다는 것을 나타내고 어둡게 설정하면 사용자가 어두운 테마를 선호한다는 것을 나타냅니다. 아래에 작성된 예:

@media (prefers-color-scheme: initial) {
} ;

@media (prefers-color-scheme: light) {
} ;

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

중괄호 안에 대상으로 지정할 클래스, ID 또는 요소를 지정할 수 있지만 이렇게 하면 시간이 많이 걸리고 더 효율적으로 수행할 수 있는 방법이 있을 수 있습니다. 대신 css 사용자 지정 속성을 사용하는 것이 매우 유용할 수 있습니다. 이렇게 하는 것의 가치는 사용자 지정 색 구성표를 설정한 다음 사용자가 밝은 테마를 원하는지 어두운 테마를 원하는지에 따라 변수에 할당된 색을 변경할 수 있다는 것입니다.

루트 요소에서 css 변수에 색상을 설정한 다음 어두운 모드의 경우 색상을 전환하기만 하면 됩니다. 아래 예:

:root {
  --background-Clr: #f9f8fa;
  --background-Clr-sec: #ffffff;
  --prmy-text-color: #171717;
  --sec-text-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-Clr: #282828;
    --background-Clr-sec: #141414;
    --prmy-text-color: #ffffff;
    --sec-text-color: #171717;
  }
}

You may also need to target additional classes or ids to fine tune the colour scheme.

이제 이것이 완료되었으므로 사용자 시스템 기본 설정을 기반으로 자바 스크립트를 구현하지 않고 밝고 어두운 색 구성표를 설정하는 방법이 있습니다.


우리가 만들고 있는 앱에서 기능을 구현하는 방법을 보려면 YouTube 채널을 확인하십시오!