단 3단계로 웹 앱에 다크 모드를 빠르게 추가하는 방법

13948 단어 darkwebappjavascriptreact
다크 모드는 멋지고 날렵하며 이제 우리 앱의 필수 요소가 되었습니다. 모든 최신 앱에는 이 기능이 있으며 거의 ​​85%의 사용자가 이 기능을 선호합니다.

이 게시물에서는 웹 앱에서 dark-mode-toggle을 사용하여 다크 모드의 빠른 구현을 배우려고 합니다.


1단계: 다크 토글 구성 요소 가져오기 및 추가



ChromeLab에서 다크 토글의 웹 구성요소를 가져와서 추가해 보겠습니다.

//Import Script
<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>




//Toggle component
<dark-mode-toggle
  id="dark-mode-toggle-1"
  appearance="toggle"
  dark="Dark"
  light="Light">
</dark-mode-toggle>


index.html에 추가해봅시다.

//index.html
<html lang="en">
  <head>
    <title>Dark mode demo app</title>
    <script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="header">
      <h1>Hi there, let us do a quick implementation of dark mode!!</h1>
      <dark-mode-toggle
        id="dark-mode-toggle-1"
        appearance="toggle"
        dark="Dark"
        light="Light"
      ></dark-mode-toggle>
    </header>
    <img
      src="https://i.postimg.cc/mDDBx3G8/photo-1546587348-d12660c30c50.jpg"
      alt="Nature"
      width="320"
      height="195"
    />
    <p>Check out the dark mode toggle in the top right corner!</p>
  </body>
</html>


결과는 다음과 같습니다




2단계: 어두운 모드와 밝은 모드를 위한 두 개의 개별 CSS 파일 만들기



이제 dark.css와 light.css라는 두 개의 개별 CSS 파일을 만들고 index.html에 연결합니다.

//light.css
html {
  background: #fff;
  color: #08090a;
}




//dark.css
html {
  color: #fff;
  background: #08090a;
}




//index.html
<html lang="en">
  <head>
    <script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="light.css"
      media="(prefers-color-scheme: light)"
    />
    <link
      rel="stylesheet"
      href="dark.css"
      media="(prefers-color-scheme: dark)"
    />
  </head>
  <body>...


여기에서 <link> 둘 다 prefers-color-scheme 밝음 또는 어두움을 사용하는 이 미디어 속성을 가지고 있음을 알 수 있습니다.

이제 색상 모드를 전환할 수 있습니다 🎉🎉🎉



하지만 잠깐... 실제로 입력을 업데이트하는 것이 아닙니다. 지금 이 퍼즐을 풀어봅시다 🤞

3단계: 색 구성표 변경을 수신할 이벤트 리스너 추가



이제 색 구성표 변경 사항을 수신하고 변경 사항을 루트 요소에 적용할 이벤트 리스너를 javascript 파일에 추가해야 합니다.

//script.js
document.addEventListener('colorschemechange', (e) => {})


스타일 속성 색 구성표를 루트 요소에 할당해 보겠습니다.

//script.js
document.addEventListener("colorschemechange", (event) => {
  document.documentElement.style.setProperty(
    "color-scheme",
    event.detail.colorScheme
  );
});


이제 앱의 모든 입력이 다크/라이트 모드 토글에도 반영되는 것을 볼 수 있습니다.

나는 당신이 가이드를 즐겼기를 바랍니다.

Code snippet
Demo app



JavaScript를 사용하여 전체 스택 개발 빠른 트릭을 배우는 데 관심이 있다면 나를 팔로우할 수 있습니다.

시청 해주셔서 감사합니다.
서명 기반 인증 + Next.js? 10분 안에 Zalter를 통합하는 방법
Tailwind CSS 감사 페이지 예

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage