Javascript 다크모드 라이트모드 구현하기

Javascript 다크모드 라이트모드 구현하기

Javascript toggle을 적용하기

toggle이란, on/off 스위치 처럼 켰다, 껐다 하는 기능을 가지고 있음

 

아래 코드와 같이 CSS로 배경색상 및 폰드 색상을 지정해놓고

자바스크립트 토글로 현재 색상에서 CSS에 저장해 놓은 .dark-mode의 색상으로 변경 가능

HTML

<button class="mode" onclick="darkMode()" id="button">Dark Mode</button>

CSS

<style>
	.dark-mode {
  	 	background-color: #092c3e;
   		color: white;
	}
</style>

Javascript

function darkMode() {
    var body = document.body;
    body.classList.toggle("dark-mode")

 

토클로 배경과 폰트의 색상 뿐만 아니라 HTML의 원하는 객체의 색상 또한 바꿀 수 있음

HTML 태그에 id값을 정해주고 자바스크립트에서 getElementById로 활용

Javascript
	
    // 버튼 클릭시 버튼 text 변경
    var button = document.getElementById("button");
    if(button.innerHTML == "Dark Mode") {
        button.innerHTML = "Light Mode";
    } else {
        button.innerHTML = "Dark Mode";
    }

	// 버튼 클릭시 카드 색상 변경
    var card_dog = document.getElementById("card1");
    if (card_dog.style.backgroundColor == 'lightblue') {
        card_dog.style.backgroundColor = 'white';
    } else {
        card_dog.style.backgroundColor = 'lightblue';
    }
    var card_dog = document.getElementById("card2");
    if (card_dog.style.backgroundColor == 'lightblue') {
        card_dog.style.backgroundColor = 'white';
    } else {
        card_dog.style.backgroundColor = 'lightblue';
    }
    var card_dog = document.getElementById("card3");
    if (card_dog.style.backgroundColor == 'lightblue') {
        card_dog.style.backgroundColor = 'white';
    } else {
        card_dog.style.backgroundColor = 'lightblue';
    }

01