CSS변수를 사용하여 다크모드 구현하기

nosiba·2022년 3월 10일

🐥 완성화면

🔎 CSS변수

재사용할 임의의 값을 전용 표기법을 사용해 정의하고 (--main-color : black;) var() 함수를 사용해 접근 (color : var(--main-color;)

:root {
  --main-bg-color: #212529; /* --속성이름 : css값 */
}

element {
  background-color: var(--main-bg-color);
}

흔히 보이는 패턴으로 :root 가상 클래스에 사용자 지정 속성을 선언하고, 필요한 곳에서 그 속성을 참조함으로써 코드 반복을 줄일 수 있다.
:root는 문서 트리의 루트 요소를 선택한다. HTML의 루트 요소는 <html> 이므로, :root의 명시도가 더 낮다는 점을 제외하면 html 선택자와 똑같다.

🐣 코드

<div class="badges">
  <span class="badge rounded-pill bg-light text-dark whiteBtn">On</span>
  <span class="badge rounded-pill bg-dark moveBtn blackBtn"><i class="fa-solid fa-moon"></i>다크모드 &nbsp;</span>
</div>

bootstrap을 이용하여 다크모드 버튼을 만들어 주었다. ( 흰배경의 버튼과, 검정 배경의 버튼을 겹쳐놓았고, 클릭시 검정배경 버튼이 좌측으로 이동하도록 구현 )

/* 기본 버튼 디자인 */
.whiteBtn {
  width: 50px;
  position: absolute;
  right: 0px;
  text-align: right;
  border: 1px solid #f8f9fa;
  font-size: 11px;
}

.blackBtn {
  width: 67px;
  position: absolute;
  transition: all 0.3s;
  right: -1px;
  border: 1px solid #f8f9fa;
  font-size: 11px;
  font-weight: 500;
}
  
/* 다크모드 클릭시 부착되는 class */
.darkeModeOn {
  width: 67px;
  position: absolute;
  transition: all 0.3s;
  right: 28px;
  border: 1px solid #f8f9fa;
}

/* 다크모드 구현 css */
:root[color-theme='light'] {
  --background: #fff;
  --fontColor: #212529;
}

:root[color-theme='dark'] {
  --background: #212529;
  --fontColor: #fff;
}

body {
  background: var(--background);
  color: var(--fontColor);
}

 // 다크모드 버튼 (흰배경+검정배경)
 let $darkModeBtn = document.querySelector('.badges');
 // 검정배경 버튼
 let $blackBtn = document.querySelector('.blackBtn');
 let onOff = false; //불값을 저장하여 온오프기능 구현

    $darkModeBtn.addEventListener('click', () => {
      onOff = !onOff;

        if( onOff ){
          $blackBtn.classList.add('darkeModeOn');
          document.documentElement.setAttribute('color-theme', 'dark');
        } else {
          $blackBtn.classList.remove('darkeModeOn');
          document.documentElement.setAttribute('color-theme', 'light');
        }
      });

💡 `.toggle()`을 사용하여 구현방법

다크모드 클릭 시 부착할 css를 디자인한다.

.darkMode {
background-color: #212529;
color: white;
}

.toggle()을 사용하여 다크모드 클릭시 class를 붙였다, 제거할 수 있다.

 $darkModeBtn.addEventListener('click', () => {
    
    $blackBtn.classList.toggle('darkeModeOn'); //버튼 애니메이션
    document.body.classList.toggle('darkMode'); //다크모드 css

  });