라이트/다크 모드 전환이 가능하고 그떄마다 사이트의 배경, 그리고 전반적인 요소들의 색이 변하는 사이트.
자바스크립트 분석.
토글 기능생성.
const toggleSwitch = document.querySelector('input[type="checkbox"]');
//쿼리셀렉터로 상세하게 지정해서 가져옴.
//테마를 바꾸기
function switchTheme(event){
if(event.target.checked){
document.documentElement.setAttribute('data-theme','dark');
} else{
document.documentElement.setAttribute('data-theme', 'light');
}
}
//체크상태 변경시 발생하는 change 이벤트 부여.
toggleSwitch.addEventListener('change',switchTheme);
간단하게 <html> = document.documentElement이다.
이제 화면의 색이 변한다. 그러나 내부의 일러스트레이션등의 색이 변하지 않으므로.
이를 바꿔보자.
function darkMode() {}
function lightMode() {}
흑백의,두 모드를 만들어 .
function imageMode(color) {}
이미지의 내부 색을 바꿀 모드.
모드의 안을 살펴보면
function darkMode() {
nav.style.backgroundColor = 'rgb(0 0 0 / 50%)';
textBox.style.backgroundColor = 'rgb(255 255 255 / 50%)';
안내문과 글자칸의 배경색을 바꿔줌.
toggleIcon.children[0].textContent = 'Dark Mode';
toggleIcon.children[1].classList.replace('fa-sun', 'fa-moon');
토글 아이콘의 글자를 바꿔주고 클래스를 지움으로서 색을 바꿈.
imageMode('dark');
이미지를 바꿔주는 기능을 dark로 실행.
}
function imageMode(color) {
image1.src = img/undraw_proud_coder_${color}.svg;
이미지는 svg이므로 코드를 바꿈으로서 색을 변경해줄 수 있다. ${color}안에 색을 넣어줌으로 변경.
다크 모드 저장하기.
기본적인 사항은 만드는 데 성공했지만 문제는 사이트를 새로고침하면 기본값인 라이트 모드로 되돌아가버린다. 이를 해결하려면 현재의 설정을 로컬 스토리지에 저장해야 한다.
기본적으로 두개의 저장소가 있다.
설명
로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)
차이점은 데이터의 영구성
로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남음. 하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거
현재의 다크모드는 세션. 그러니 로컬 스토리지에 저장하고 그걸 꺼내서 세션에 적용해야 한다.
localStorage.setItem('theme', 'light');
로컬스토리지에 키,값 쌍을 전달.
// Check Local Storage For Theme
const currentTheme = localStorage.getItem('theme');
테마 값을 가져와서 상수에 담아놓는다.
if (currentTheme) {
조건문 활용, 테마값이 비어있지 않을때--비어있으면 조건 미충분.
document.documentElement.setAttribute('data-theme', currentTheme);
스토리지에 현재 테마 정보를 입력.
if (currentTheme === 'dark') {
다크 모드면 토글 스위치가 눌린 상태로 있게 하고 다크 모드를 실행.
toggleSwitch.checked = true;
darkMode();
}
}이러면 세션이 재실행될때. 즉 새로고침시에 기본값으로 돌아갔다가, 현재 테마값을 전달받고 빠르게 다크모드로 변하게 된다.
