암흑 모드는 네트워크에서 쉽게 실현된다

This post has been originally published on my blog

암흑 모드🌒 지난 몇 년 동안 이것은 하나의 추세가 되었다. 거의 모든 사이트가 이 점을 지지한다는 것을 알 수 있다. 유명한 트위터를 포함하여 어두운 패턴이 유명해진 주요 원인은 빛이 어두운 곳에서 사람의 눈이 어두운 배경에서 옅은 색 텍스트를 보는 것이 어두운 배경에서 옅은 색 텍스트를 보는 것보다 훨씬 낫다는 것이다.

이 빠른 글에서 CSS와 JavaScript를 사용하여 이 점을 쉽게 실현할 수 있는 방법을 보여 드리려고 합니다.

가설

우리는 작은 HTML 페이지가 있는데 기본적으로 얕은 테마가 있습니다. 방문자들에게 어두운 테마와 옵션을 제공해야 하기 때문에 기본적으로 CSS의 변수를 변경함으로써 이 점을 쉽게 실현할 것입니다. CSS--primary-color의 사용자 정의 속성이든 Sass$primary-color나 그 어떠한 방식도 사용할 수 있습니다.
다음은 얘가 가벼운 주제처럼 보여요.

해석하다

우리가 가지고 있는 CSS 변수를 먼저 봅시다. (전체 코드가 본문 말미에 언급된GitHub repo에 있는 것을 걱정하지 마십시오.)

:root {
  --primary-bg: #eee;
  --primary-fg: #000;
  --secondary-bg: #ddd;
  --secondary-fg: #555;
  --primary-btn-bg: #000;
  --primary-btn-fg: #fff;
  --secondary-btn-bg: #ff0000;
  --secondary-btn-fg: #ffff00;
  --image-opacity: 1;
}

// here is the rest of the CSS styles

주요 목표는 이러한 변수 값을 다음 값으로 변경하는 것입니다.

:root {
  --primary-bg: #282c35;
  --primary-fg: #fff;
  --secondary-bg: #1e2129;
  --secondary-fg: #aaa;
  --primary-btn-bg: #ddd;
  --primary-btn-fg: #222;
  --secondary-btn-bg: #780404;
  --secondary-btn-fg: #baba6a;
  --image-opacity: 0.85;
}

사용자가 선호하는 경우dark mode만 상술한 변수가 같은 변수 이름이고 다른 값만 테마를 어둡게 할 수 있다. 같은 변수를 두 번 정의하면 뒤의 변수가 첫 번째 변수를 덮어쓰기 때문이다.

CSS만 사용

CSS에서 prefers-color-scheme 미디어 쿼리를 사용하는 등 몇 가지 방법으로 이 문제를 해결할 수 있습니다. 미디어 쿼리가 다음과 같으면 색상 변수 목록을 활성화합니다.

@media (prefers-color-scheme: dark) {
  :root {
    --primary-bg: #282c35;
    --primary-fg: #fff;
    --secondary-bg: #1e2129;
    --secondary-fg: #aaa;
    --primary-btn-bg: #ddd;
    --primary-btn-fg: #222;
    --secondary-btn-bg: #780404;
    --secondary-btn-fg: #baba6a;
    --image-opacity: 0.85;
  }
}

그것은 대부분의 현대 브라우저에서 좋은 응용 프로그램 support 을 가지고 있는데, 물론 IE11은 아니다.
이러한 상황에서 귀하는 사용자를 위해 전환 단추를 실현할 필요가 없습니다. 왜냐하면 귀하의 사이트는 어쨌든 사용자의 선호를 따르기 때문입니다.User preference: 현대 운영체제에서 당신은 설정에서 운영체제의 일반 테마를 변경하여 어둡거나 밝게 할 수 있습니다. CSS에 상기 코드를 추가하면 운영체제에서 사용자의 선호를 얻고 사용자의 선호에 따라 사이트를 표시할 수 있습니다. 이것은 좋은 힌트입니다.💫
다음은 어둠 모드에서의 모양새입니다.

그러나 사용자가 운영체제의 첫 번째 옵션을 고려하지 않고 조명 모드에서 사이트를 미리 보는 것을 좋아한다면 문제가 발생할 수 있습니다. 이 경우, 사용자의 첫 번째 설정으로 전환하기 위한 단추를 실행해야 합니다.

전환 버튼 구현(JavaScript)

우선, 주체를 닫기 전에 HTML 파일의 끝에 간단한 스크립트 태그를 추가하고, 그 중에서 우리가 어두운 모드로 전환할 단추를 선택하십시오.

// here is the button
<div id="dark-mode-toggle" title="Dark mode toggle">🌒</div>
... // here is the script tag
<script>
  const toggleButton = document.querySelector("#dark-mode-toggle")
</script>

현재 우리는 사용자의 선호도를 보존하고 유지하는 방법을 고려해야 한다. 가장 좋은 해결 방안은 localStorage 이다.
이 단추를 누르고localStoragetheme 키의 값이 dark인지 확인하고 light로 전환한 다음 아이콘을 변경합니다. 그렇지 않으면 상반된 동작을 수행합니다.
다음은 스크립트입니다.

<script>
  const toggleButton = document.querySelector('#dark-mode-toggle');

  toggleButton.addEventListener('click', (e) => {
    darkMode = localStorage.getItem('theme');
    if (darkMode === 'dark') {
      disableDarkMode();
    } else {
      enableDarkMode();
    }
  });

  function enableDarkMode() {
    localStorage.setItem('theme', 'dark');
    toggleButton.innerHTML = '☀️';
  }

  function disableDarkMode() {
    localStorage.setItem('theme', 'light');
    toggleButton.innerHTML = '🌒';
  }
</script>

현재, 우리는localStorage의 theme 키를 light 에서 dark 로 변경할 수 있는 단추 기능이 있는데, 반대로 아이콘을 바꾸어 일부 내용을 표시할 수도 있지만, 우리는 여전히 목표에 도달하지 못했다.
이 아이디어는 암흑 모드 CSS 변수를 저장하고 조건에 따라 클래스를 추가/삭제하며 주체에 사용할 가장 좋은 요소를 추가하는 패키지 클래스를 만드는 것입니다.
먼저 CSS를 수정하고 다음과 같이 클래스를 만듭니다.

.dark-mode {
  --primary-bg: #282c35;
  --primary-fg: #fff;
  --secondary-bg: #1e2129;
  --secondary-fg: #aaa;
  --primary-btn-bg: #ddd;
  --primary-btn-fg: #222;
  --secondary-btn-bg: #780404;
  --secondary-btn-fg: #baba6a;
  --image-opacity: 0.85;
}

그런 다음 스크립트로 이동하여 함수를 약간 변경합니다.

function enableDarkMode() {
  document.body.classList.add("dark-mode")
  localStorage.setItem("theme", "dark")
  toggleButton.innerHTML = "☀️"
}

function disableDarkMode() {
  document.body.classList.remove("dark-mode")
  localStorage.setItem("theme", "light")
  toggleButton.innerHTML = "🌒"
}

이제 전환 버튼을 클릭하면 다음과 같이 기능이 정상적으로 작동합니다.

또 하나 주의해야 할 것은 다시 불러올 때localStorage의 설정이라면 어두운 모드를 받지 않을 뿐만 아니라 해결 방안도 매우 간단하다. 스크립트의 시작에 이 옵션을 추가하면 된다.

let darkMode = localStorage.getItem("theme")

if (darkMode === "dark") enableDarkMode()

이렇게 하면 당신은 지금 시작할 수 있지만 이 예에서 우리는 미디어 조회를 사용하기 전에 실현된 사용자 선호도를 잃었다. 좋은 소식은 우리가 자바스크립트에서 이 점을 들을 수 있고 다음과 같다.

window
  .matchMedia("(prefers-color-scheme: dark)")
  .addListener(e => (e.matches ? enableDarkMode() : disableDarkMode()))

위의 코드를 사용하면 사용자가 원하는 내용을 변경할 때마다 웹 사이트에서 이를 따르게 되므로 완벽한 스크립트 탭이 제공됩니다.

<script>
  const toggleButton = document.querySelector("#dark-mode-toggle")
  let darkMode = localStorage.getItem("theme")

  if (darkMode === "dark") enableDarkMode()

  toggleButton.addEventListener("click", e => {
    darkMode = localStorage.getItem("theme")
    if (darkMode === "dark") {
      disableDarkMode()
    } else {
      enableDarkMode()
    }
  })

  function enableDarkMode() {
    document.body.classList.add("dark-mode")
    localStorage.setItem("theme", "dark")
    toggleButton.innerHTML = "☀️"
  }

  function disableDarkMode() {
    document.body.classList.remove("dark-mode")
    localStorage.setItem("theme", "light")
    toggleButton.innerHTML = "🌒"
  }

  window
    .matchMedia("(prefers-color-scheme: dark)")
    .addListener(e => (e.matches ? enableDarkMode() : disableDarkMode()))
</script>

결론

😅 Phew, 그렇습니다. 이것은 간단하지만 중요한 해결 방안입니다. 현재 매우 유행하고 있습니다. 당신은 Github repo에서 완전한 코드 예시를 찾을 수 있습니다. 저는 당신이 이 빠른 강좌에서 새로운 것을 배울 수 있기를 바랍니다.
도움이 필요하시면 언제든지 트위터에서 저와 공유하거나 토론하거나 저를 따라다니며 친구가 되세요.
만약 당신이 아랍어를 이해한다면 다음은 아랍어 강좌에서 한 걸음 한 걸음 설명하는 것이다.
https://youtu.be/QC0PMPhq6CM
토트 제인스👋