Apple의 다크 모드 아이콘 재현

몇 주 전에 iPhone의 제어 센터를 만지작거리면서 "다크 모드"라는 새 아이콘을 발견했습니다.



대부분 태양과 달이 포함된 '다크 모드' 아이콘을 많이 보았지만 이 아이콘은 매우 간단하고 직관적입니다.

SVG로 다시 만들고 CSS 마법을 추가해 봅시다!

먼저 원이 필요합니다.

<circle r="195" cx="200" cy="200" fill="#FFF" stroke="#000" stroke-width="10" />

아이콘이 밝은 배경에서도 작동하도록 검은색 선을 추가했습니다.



이제 반원은 좀 더 복잡합니다. 이를 위해서는 아크가 필요합니다.

SVG에서는 이것을 A 라고 하며 path 내에 있습니다.

<path d=" M 200 375 A 175 175 0 0 1 200 2" />

호를 수동으로 코딩할 수 있지만 도구를 사용하는 것이 훨씬 쉽습니다. Here's an online tool, you can use .

이제 다음이 있습니다.



두 개의 반원을 더 추가합시다

<path d=" M 200 300 A 100 100 0 0 1 200 100" fill="#FFF" />
<path d=" M 200 100 A 100 100 180 0 1 200 300" />

— 그리고 우리는 이것을 가지고 있습니다:



이제 재미있는 부분입니다! 0 또는 1일 수 있는 단일 CSS 사용자 정의 속성을 추가해 보겠습니다.

body {
  --dark-mode: 0;
}

이 속성을 사용하여 페이지의 background-color를 설정합니다.

body {
  background-color: hsl(0, 0%, calc(100% * (1 - var(--dark-mode))));
}

hsl 에서 세 번째 매개변수는 밝기입니다. 0%는 검정색이고 100%는 흰색입니다. 따라서 100%에 1(어두운 모드 켜짐) 또는 0(어두운 모드 꺼짐)를 곱합니다.
invert 및 rotate 아이콘에 동일한 속성을 사용합니다.

.class {
  filter: invert(var(--dark-mode));
  transform: rotate(calc(var(--dark-mode) * 180deg));
}

이제 --dark-mode 속성을 1 로 변경하면 아이콘이 반전되고 회전하며 페이지 배경이 검은색으로 변경됩니다.



속성을 전환하는 방법은 사용자에게 달려 있습니다. "no-JS"방식은 checkbox 일 수 있고 JS 방식은 다음과 같을 수 있습니다.

element.addEventListener('click', () => {
  const current = document.body.style.getPropertyValue("--dark-mode") - 0;
  document.body.style.setProperty("--dark-mode", 1 - current);
})

먼저 getPropertyValue()를 사용하여 현재 상태를 가져옵니다. 0 (이전 JS-hack!)를 빼서 숫자 값으로 변환한 다음 setProperty()를 사용하여 반대 값을 설정합니다.

다음은 Codepen 데모입니다.

NOTE: In the Codepen, I've added the JS-toggle-function to the svg itself. In production, add proper semantics, like a <button> or similar.