CSS 변수(및 JS!)를 사용하여 어두운 테마를 수행하는 가장 쉬운 방법

1. HTML 설정

<body>
    <div class="container">
      <h1>My beautiful theme</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Repellat nihil nisi quidem pariatur optio iste vero id velit deleniti tenetur, sit deserunt.
      </p>
      <button id="theme-switcher">Switch theme!</button>
    </div>
</body>

사용자가 테마를 변경할 수 있도록 간단한 버튼을 사용합니다.

2. vars를 사용하여 CSS 설정

:root {
  --background: #f7fafc;
  --container: #edf2f7;
  --text-primary: #1a202c;
}

.dark {
  --background: #4a5568;
  --container: #2d3748;
  --text-primary: #f7fafc;
}

body {
  background-color: var(--background);
  font-family: sans-serif;
  color: var(--text-primary);
}

.container {
  background-color: var(--container);
  padding: 10px;
  text-align: center;
}

:root 변수는 페이지가 로드될 때 기본적으로 사용되는 변수이며 .dark'는 어두운 테마와 일치합니다.
NB: 원하는 만큼 테마를 정의할 수 있습니다.

이제 본문에 "dark"클래스를 적용하면 다음과 같습니다.

3. "테마 전환" 버튼 설정

 const themeSwitcher = document.getElementById('theme-switcher');
      themeSwitcher.addEventListener('click', function() {
          document.body.classList.toggle('dark'); 
      })

버튼에 이벤트 리스너를 추가하여 클릭 시 테마를 변경하기만 하면 됩니다! 이제 버튼을 클릭하면 작동합니다!

4. 사용자의 선택을 localStorage에 저장

먼저 eventListener에 다음 줄을 추가합니다.

localStorage.setItem('theme', document.body.classList);

사용자가 테마를 변경하면 localStorage에 저장합니다.
그런 다음 스크립트 상단에서 다음을 수행합니다.

if(localStorage.getItem('theme') === "dark") { 
    document.body.classList.toggle(localStorage.getItem('theme'));
}

이제 사용자가 귀하의 사이트를 방문하는 즉시 선택한 테마가 자동으로 적용됩니다!
여기에서 코드를 찾을 수 있습니다: https://jsfiddle.net/03h84v6m/1/

🦄

Reference

이 문제에 관하여(CSS 변수(및 JS!)를 사용하여 어두운 테마를 수행하는 가장 쉬운 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/corentints/easiest-way-to-do-a-dark-theme-with-css-vars-and-js-26ah

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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