어떻게 디자이너의 도움을 요청하지 않은 상황에서 웹 응용 프로그램에 검은색 테마를 추가합니까

너는 이런 상황을 만난 적이 있니? 너는 너의 새로운 응용 프로그램을 위해 어두운 주제를 만들어야 하는데, 디자이너가 너를 도와주지 않니?너는 이미 마지막 기한이 되어서, 이 프로젝트를 제때에 완성할 희망이 없는 것 같다.만약 당신이 지금 이런 상황에 처해 있다는 것을 발견한다면, 당신은 정확한 곳에서 그것을 벗어날 방법을 찾을 수 있을 것이다.
본고에서 디자이너의 도움 없이 응용 프로그램에 어두운 주제를 만드는 방법을 알게 될 것이다.더 이상 말할 필요가 없다. 우리 이 과정을 깊이 연구합시다.

어두운 테마 추가하기

주제 추가는 3단계로 진행되는 매우 간단한 프로세스입니다.
1단계 - 색상 선택:

:root {
  --primary-color: #2e3a59;
}

2단계 - 용례 추가:

html {
  color: var(--primary-color);
}

3단계 - 새 주제 추가:

:root.other-theme {
  --primary-color: #8f9bb3;
}

CSS Custom Properties을 사용할 수 없는 경우 SASS에서 몇 주기를 작성해야 합니다.너는 이것이 식은 죽 먹기라고 말할 수 없지만, 우리는 방법을 강구해서 완성할 것이다.
하지만 디자이너가 먼저 디자인해 준 상황에서만 몇 가지 주제를 가질 수 있는 함정이 있다.항상 손에 테마가 있는 것은 아니지만 기본 테마에 검은색 테마를 추가하고 싶습니다.접근성이 중요하다.
한 번은 내가 프로젝트에 참가했는데, 그 중 한 디자이너는 초기 단계에서만 일했다.모든 디자이너들이 매우 바쁘기 때문에 우리는 그들이 그들의 부분을 완성하기를 기대할 수 없다.그러나 프로젝트가 끝났을 때 어두운 주제를 추가함으로써 그것을 더욱 좋아지게 하는 아이디어가 나왔다.
첫 번째 버전을 만들 때, 우리는 복잡한 논리와 추가 컨트롤을 추가하고 싶지 않습니다.따라서 사용자가 테마를 변경하는 것을 허용하지 않기로 결정했습니다.첫 번째 옵션을 간단하게 유지하는 유일한 방법이기 때문에 우리는 시스템 설정에 따라 일을 처리해야 한다.

어두운 주제를 정의하는 규칙

이제 우리는 어둠의 주제를 언제 나타낼지 알아야 한다.이를 위해 특별한 CSS 미디어 쿼리 prefers-color-scheme이 있습니다.
지원은 CSS 사용자 지정 속성(https://caniuse.com/prefers-color-scheme)의 지원과 거의 같습니다.

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

색상은요?

알겠습니다. 표시할 테마를 어떻게 정의하는지 결정했습니다.그런데 어두운 주제에 색깔이 없으면 어떡하지?이 문제에도 답이 있다.전체 페이지에 색상 반전 필터를 적용할 수 있습니다.마찬가지로 지원은 CSS 사용자 정의 속성(https://caniuse.com/css-filters)과 유사합니다.

@media (prefers-color-scheme: dark) {
  :root {
    filter: invert(100%);
  }
}

이제 페이지에 텍스트를 추가합니다.날카로워 보이죠?그리고 목록, 인용문, 무작위 텍스트 항목을 추가합니다. 이전과 같이 보기 좋습니다.그럼에도 불구하고, 우리가 그림을 추가할 때, 그것은 마이너스로 변한다.

이 단계에서 우리는 전체 페이지를 반전시킨다.이것은 모든 원소의 색깔이 상반되는 변화를 일으킨다는 것을 의미한다.반전 효과는 좋지만 내 사진이 마이너스로 변하는 것은 원치 않는다.이런 상황을 피하기 위해서 이상을 추가해야 합니다.

@media (prefers-color-scheme: dark) {
  :root,
  :root img {
    filter: invert(100%);
  }
}

그러나 이 경우 예외라기보다는 한 번의 리모델링이다.현재, 우리는 이미지에 '재개조' 만을 적용했다.만약 동영상이나 iFrame, 또는 반전할 수 없는 다른 내용이 있다면, 그것들에 대해서도 같은 규칙을 적용해야 한다.

걸출하다
그러나 당신은 나에게 "왜 우리는 :root에 필터를 적용하고 시각 요소를 초기 상태로 반전시켜야 합니까?"라고 물어볼 것이다.다음 CSS 코드를 작성할 수 없는 이유는 무엇입니까?

*:not(img) {
  filter: invert(100%);
}

선택기를 사용하면 이미지를 제외한 모든 요소에 필터를 적용할 수 있습니다.단, 필터의 특성을 고려해야 합니다.다음 페이지 레이아웃을 살펴보겠습니다.

<div>
  <p>
    Text in p
    <span>and in span.</span>
  </p>
  With picture of me:
  <img src="./pic.jpg" />
</div>

따라서, div이 우리의 선택기와 일치할 때 필터가 적용됩니다.따라서 모든 것이 부정적일 것이다.

은 p이 div 내부에 있기 때문에 선택기와 일치하고 변화할 수 있다.따라서 우리는 그것을 다시 개조하여 색깔을 정상으로 회복할 것이다.

span도 선택기와 일치합니다.p은 정상으로 돌아왔지만 span의 내용물은 음성으로 나왔다.

마지막으로 img 선택기는 필터의 영향을 받지 않기 때문에 반전이 일어나지 않습니다.그러나 img은 우리가 반전하는 요소의 일부이기 때문에 이미지는 마이너스일 것이다.

이것이 바로 화면의 모습입니다.

이것이 바로 우리가 root 요소에 필터를 한 번 적용하는 이유이다.그리고 우리는 변하지 않으려는 원소를 반전시켜 다시 초기 상태로 가져간다.
완성!첫 번째 버전이 잘 실행되어 고객이 매우 만족한다.
이 과정의 두 번째 단계에서 우리는 주제를 위해 스위치를 추가했다.
이를 위해 프로그램 제목에 select을 추가하여 사용자가 좋아하는 테마를 선택할 수 있도록 합니다.선택에는 light, dark 및 auto의 3가지 옵션이 포함됩니다.
따라서 auto은 응용 프로그램이 시스템 설정을 계승할 수 있도록 하는 기본값이 될 것이다.또한 light 또는 dark을 선택할 때 우리는 theme-light 또는 theme-dark 클래스를 문서의 root 요소에 상응하여 추가할 것이다.그리고 auto을 사용하면 테마 클래스를 삭제합니다.가장 중요한 것은 이 설정들을 localStorage에 저장해서 이전 테마를 표시할 수 있도록 합니다.
몇 가지 클래스를 추가한 후 CSS를 수정합니다.

@media screen and (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.theme-dark),
  :root:not(.theme-light):not(.theme-dark) img {
    filter: invert(100%);
  }
}

:root.theme-dark,
:root.theme-dark img {
  filter: invert(100%);
}

마무리

이렇게!디자이너의 도움 없이 응용 프로그램에 어두운 테마를 추가할 준비가 되어 있습니다.그러나 글을 쓰기 전에 요점을 더 잘 기억하기 위해 이력서를 읽어 보세요.
다음과 같은 프로세스 논리가 있습니다.

조명 테마를 선택하면 - 아무것도 하지 않는다.

어둠의 그 - 항상 뒤바뀌면;

어두운 테마와 밝은 테마를 선택하지 않으면 시스템 설정에 따라 반전됩니다.

필터를 사용하여 어두운 테마를 생성하는 것은 매우 간단하고 빠르다.
그럼에도 불구하고 페이지 내용은 반전할 수 없는 미세한 차이가 있을 수 있다.대부분의 경우, 너는 이 대상들을 간단하게 개조해서 이 문제를 해결할 수 있다.그러나 그것이 항상 효과가 있는 것은 아니기 때문에 우리는 해커를 사용해야 한다.
그러나 이런 방법에는 단점도 있다.

은 모든 색상이'미관적으로'반전되는 것은 아니므로 UI를 약간 더럽힐 수 있습니다.

은 명암색을 바꾸어 서로 다른 인터페이스의 시각적 체험을 창조할 수 없다.

마지막이지만 가장 중요하지 않은 것은 모든 색깔이 반전된다는 것이다.따라서 당신의'브랜드 색깔'도 바뀌어 기업 이미지를 손상시킬 수 있다.

여러 가지 단점이 있지만, 프로그램에 검은색 테마를 추가할 수 있는 믿음직스럽고 빠른 방법이다.또한 다른 주제를 시도하고 개념 검증을 하며 응용에 적합한지 확인하는 것도 도움이 된다.