🌓 다크모드 토글 버튼 구현하기

김민아·2022년 7월 21일

JavaScript darkMode 코드스테이츠

[실습] 아고라스테이츠 만들기

목록 보기

4/4

아고라스테이츠 만들어 보자

목표

다크모드 버튼을 누르면 라이트/다크 모드로 전환이 된다.
CSS variable을 사용해 본다.

아고라스테이츠 데모 보기

🌝 🌚 다크모드 구현??

필수 과제는 아니었지만, ~~밋밋한 화면을 커버해줄~~ 다크모드를 구현해 보았다.
CSS 공부할 때 배웠던 CSS variable을 써보고 싶어서 두가지 방법으로 시도해 보았다.

디바이스의 시스템 다크 모드를 적용하는 것은 아니다!
(::TODO:: 추후에 기회가 있으면)

첫번째. CSS attribute 선택자로 구현하기

`body` 태그에 attribute 추가

HTML에 button element를 추가해 준다.
body 태그에 data-theme attribute를 추가한다. (light-mode/dark-mode 토글로 제어)

<body data-theme="light-mode">
<!-- 이하 중략 -->
	<div class="darkmode">
		<button class="darkmode__btn"></button>
	</div>
<!-- 이하 생략 -->

CSS 선택자로 컬러 바꿔주기

속성을 변경할 부분들만 따로 모아 [data-theme=”dark-mode”] 선택자 아래 두었다.

/* 다크모드시 */
[data-theme="dark-mode"] {
    background-color: #111;
    color: #fff;
}

/* 다크모드시 버튼 이미지 변경 */
[data-theme="dark-mode"] .darkmode__btn {
    background: url(./img/light-toggle.png) 50% 50% / 30px auto no-repeat;
}

[data-theme="dark-mode"] .form__container {
    background-color: slateblue;
    border: 1px solid slateblue;
}
/* 이하 생략 */

JS Event Handler

현재 body 태그의 data-theme attribute를 확인하고 제어하기 위해서 dataset을 사용한다.

const darkmodeBtn = document.querySelector('.darkmode__btn')

darkmodeBtn.addEventListener('click', () => {
  if (document.body.dataset.theme === 'light-mode') {
    document.body.dataset.theme = 'dark-mode'
  } else {
    document.body.dataset.theme = 'light-mode'
  }
})


// regExp에 사용했던 match 메서드를 사용해도 적용이 되는구나..?  
darkmodeBtn.addEventListener('click', () => {
  let dataAttr = document.body.dataset
  dataAttr.theme.match('light-mode')?dataAttr.theme = 'dark-mode':dataAttr.theme = 'light-mode'  
})

두번째. CSS variable 사용해서 구현하기

우선 Can I use | css-variables에서 css var 호환성 체크!!
96.51%로 가능하다고 봐도 될 것 같다!

CSS var 적용하기

body[data-theme] 속성으로 var를 정의해 주었다. 파일을 따로 분리해도 좋을 것 같다.
이하 속성값에 var(—text) 이렇게 적용한다.

body[data-theme='light-mode'] {
  --text: #111;
  --line: #eee;
  --background: #fff;
  --container-background: palegreen;
  --container-border: yellowgreen;
  --form-button: blueviolet;
  --form-button-text: #fff;
  --list-background: #fff;
  --page-background:blueviolet;
  --page-text: #fff;
}

body[data-theme='dark-mode'] {
  --text: #fff;
  --line: #333;
  --background: #151515;
  --container-background: slateblue;
  --container-border: slateblue;
  --form-background: #fff;
  --form-button: yellow;
  --form-button-text: #111;
  --list-background: #202020;
  --page-background: yellow;
  --page-text: #333;
}

/* 예를 들면 이렇게 */
.form__submit > input {
    width: 100%;
    background-color: var(--form-button);
    color: var(--form-button-text);
}

변수를 element 기준으로 정하다보니, 콘텐츠 양에 비해서 선언할 변수가 많았다. 텍스트, 배경, 보더 등. 하지만 위 방법보다는 훨씬 간결하고 모아놓아서 관리하기 쉬운 것 같다.

출처

벨로그에 다크 모드 적용하기 | velopert
can I use | css-variables

김민아

이전 포스트

🌓 다크모드 토글 버튼 구현하기

[실습] 아고라스테이츠 만들기

아고라스테이츠 만들어 보자

목표

🌝 🌚 다크모드 구현??

첫번째. CSS attribute 선택자로 구현하기

`body` 태그에 attribute 추가

CSS 선택자로 컬러 바꿔주기

JS Event Handler

두번째. CSS variable 사용해서 구현하기

CSS var 적용하기

출처

간단한 pagination 구현하기

0개의 댓글

🌓 다크모드 토글 버튼 구현하기

[실습] 아고라스테이츠 만들기

아고라스테이츠 만들어 보자

목표

🌝 🌚 다크모드 구현??

첫번째. CSS attribute 선택자로 구현하기

body 태그에 attribute 추가

CSS 선택자로 컬러 바꿔주기

JS Event Handler

두번째. CSS variable 사용해서 구현하기

CSS var 적용하기

출처

간단한 pagination 구현하기

0개의 댓글

`body` 태그에 attribute 추가