✅ 다크모드 만들기

1️⃣ UI 만들기

• 처음에는 span 안에 아이콘을 넣는 방식으로 했으나 다크/라이트 모드 2가지가 필요해서 input-checkbox로 바꾸고 해당 상태에 따라 변경되도록 수정

• input은 id로 label과 연결시킨 다음 css에서 input은 display : none 으로 보이지 않게 함

• css 변수 사용으로 모드에 따라 요소마다 다른 색상 적용

  • 따로 클래스를 주지 않아도 변수를 사용한 곳에서는 모드에 따라 해당 색상이 적용됨 (너무 편해 🐶🍯❤️❤️)

  :root[color-theme='dark'] {
    --background: #000;
    --card-bg: #fff;
    --font-color: #fff;
    --btn-color: #727272;
    --tag-border: #fff;
  }
  
  :root[color-theme='light'] {
    --black: #fff;
    --card-bg: #d4d4d4;
    --white: #000;
    --btn-color: #fff;
  }

2️⃣ JavaScript

• 선택자를 가져와서 input과 연결
• 클릭이벤트 추가
  * html 태그에 color-theme 속성 추가
  체크되었다면? 다크모드
  체크가 풀렸다면? 라이트모드

  darkModeBtn.addEventListener('click', (e) => {
  if (e.target.checked) {
   localStorage.setItem('color-theme', 'dark');
   document.documentElement.setAttribute('color-theme', 'dark');
  } else {
   localStorage.setItem('color-theme', 'light');
   document.documentElement.setAttribute('color-theme', 'light');
  }
  });
   ```

• document.documentElement = html 태그
  

3️⃣ localStroage 에 저장

❗️ 문제1 : 새로고침하면 모드 유지가 안되고 첫 클릭을 하기 전엔 아무 모드도 아닌 상태

• 이를 해결하기 위해 localStorage 에 저장

• 클릭시 바뀌는 체크 상태에 따라 localStroage에 알맞은 모드를 저장

• 처음 페이지가 로드 되었을 때 localStorage에 저장된 값(=모드)이 있다면 해당 모드로 사용, 없다면 기본 값은 라이트모드로 설정

  let localStorageValue = localStorage.getItem('color-theme');
  
  window.onload = function () {
    if (localStorageValue) {
      document.documentElement.setAttribute(
        'color-theme',
        `${localStorageValue}`
      );
    } else {
      localStorage.setItem('color-theme', 'light');
    }
  };

❗️ 문제1-1 : 위의 코드로 실행하면 처음 페이지가 열릴 때 기본값이 없어서 아무 모드가 아닌 상태 또 발생..(순서 때문인듯?)

• 기본 값을 먼저 설정해주는 방식으로 수정

window.onload = function () {
  document.documentElement.setAttribute('color-theme', 'light');
  if (localStorageValue) {
    document.documentElement.setAttribute(
      'color-theme',
      `${localStorageValue}`
    );
  }
};

(window.matchMedia('(prefers-color-scheme: dark)').matches ? 를 사용하는 다른 방법이 있는 것 같지만 아직은 이해가 안돼서 이렇게 해결)