CSS를 통해 '다크모드'를 구현해보자!

다크모드?

다크모드는 평소 밝은 디자인이 위주였던 근래(?)의 디자인을 기기의 수명과 사용자의 눈 건강을 위하여 어두운 디자인으로 고려된 모드를 의미하는데요
오늘은 간단한 방법을 통해 각자의 사이트에 손쉽게 적용 할 수 있는 방법을 가져와봤어요!

---

CSS : 적용법

사용자의 모바일/컴퓨터의 시스템 테마에 맞춰 각 css 스타일이 적용될 수 있도록 prefers-color-scheme를 사용합니다.

@media(prefers-color-scheme: dark){
    background-color: #12121a; /* !important는 사용자 개개인의 적용 가능 여부에 따라 사용하세요 ^^b! */
}

---

CODEPEN : 적용예시

벌써 끝이네요! 생각보다 어려운것이 없습니다.
상단의 css만 적용해준다면 그 이후는 각자의 블로그에 맞는 클래스/id에 맞는 스타일을 적용시켜준다면 끝입니다.

TISTORY : 적용예시

제 블로그를 활용 예시로 넣어보았습니다.

---

마치며

숙제는 아니고,, 고냥 제 블로그에 이것저것 해보다가 이번 방법은 너무 간단해서 충분히 설명이 가능할거같아 개인적으로 적어봤어요

전 처음에 document.querySelectorAll 방법으로 .dark 클래스를 집어넣어 버튼을 클릭했을때 다크모드가 적용되게 구현해보고 있었는데
이 방법이 생각보다 설명이나 적용방법도 간편하기도 해서 한번 관심있는 분이 있을까 싶어 가져와봤습니다

굳이 꼭 다크모드라고 해서 어두운 색일 필요는 없으니 조금만 생각을 바꿔서 사용해본다면
나중에 포폴이라던지 기타등등 다른곳에 한페이지 속 두가지 모습이라던지 등등의 방법으로 유용하게 쓰일거 같아 소개해봤읍니다 ^^