darkmode 만들어보기

const theme = localStorage.getItem('theme');
// console.log(theme); // 현재 theme를 알 수 있음. // dark || light
if(theme) {
    document.documentElement.SetAttribute('data-theme', theme);
}

localStorage ::

Storage 객체는 단순한 key-value 저장소이며, 이는 객체와 비슷하다.

이 데이터들은 페이지 로딩에도 온전하게 유지된다. (다시 웹페이지에 접속 할 때 마지막 설정을 불러올 수 있다.)

localStorage

getItem(key) :: 키에 해당하는 값을 받아온다.

setItem(key, value) :: 키, 값을 보관한다.

getItem, setItem

document.documentElement === <HTML>

setAttribute(속성이름, 속성값) :: 선택한 요소(element)의 속성(attribute)값을 정한다.

document.documentElement

setAttribute

// 시스템설정확인 window.matchMedia() :: CSS의 미디어쿼리가 현재 페이지에 해당하는지 확인.
const currentTheme = localStorage.getItem('theme') || 
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');

currentTheme 상수에서 localStorage가 'theme'란 값을 가지고 있거나 window.matchMedia(...)가 'dark' 일 때, 둘 중 하나가 true이면 'dark' , false이면 'light'이다.

window.matchMedia(medaiQueryString) :: 자바스크립트를 이용해서 접속하는 웹 브라우저의 크기를 알 수 있다.

속성

media :: mediaQueryString을 반환.

matches :: 범위에 맞는지 검사. true false 반환.

// 앞에 이어서..
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
console.log(currentTheme); // (1)
document.documentElement.setAttribute('data-theme', newTheme);
locaStorage.setItem('theme', newTheme);
console.log(newTheme, currentTheme); // (2)

(1) dark 일 때, (2) light dark

currentTheme는 현재 새로고침한 후 테마이며, 과거의 테마이다.

newTheme는 지금 당장의 테마를 나타낸다.

티스토리툴바