TIL - 02. JAVA SCRIPT (다크모드)

박태환·2021년 6월 8일

다크모드 라이트모드

Today I Learned

목록 보기

2/15

Java Script 다크모드 버튼 만들기

자바스크립트를 이용해 개인페이지를 꾸며볼 수 있는 기능이 뭐가 있을까 생각하다가
간단하고 스스로 해볼 수 있는 다크모드 버튼 만들기로 결정

1. 컨셉 구상

흰 배경에 검정 글씨였던 내 개인페이지에 가장 간단히 적용해볼 수 있을 것이라고 생각했다.
'다크모드' 라고 쓰여있던 버튼을 누르면 다음과 같이 변한다.

배경 : 흰색 -> 검정색
글씨 : 검정색 -> 흰색
버튼안의 글씨 : 다크모드 -> 라이트모드

다시 바뀐 '라이트모드' 라고 쓰인 버튼을 누르면 다음과 같이 변한다.

배경 : 검정색 -> 흰색
글씨 : 흰색 -> 검정색
버튼안의 글씨 : 라이트모드 -> 다크모드

다크모드와 라이트모드로 변할 때마다 css가 수정되는 것이 아닌 다크모드로 변할 때만 class가 추가되도록 하여 그 class에 css를 지정해둔다.
토글버튼을 이용해 class를 껐다 켰다 할 수 있도록 만들 계획을 짰다.

2. html 추가

먼저 네비게이션의 홈버튼 옆에 다크모드 버튼을 만들었다.
클릭했을 때 다크모드로 변하는 함수를 추가할 것이기 때문에 미리 다크모드라는 함수를 버튼에 추가해 놓았다.
참고-https://zetawiki.com/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_onclick_%EC%9D%B4%EB%B2%A4%ED%8A%B8

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

Dark Mode

3. css 추가

다크모드 함수가 실행될 시 변경될 사항들을 미리 css로 추가해놓는다.
클래스 이름은 헷갈리지 않게 .dark mode로 설정

.dark-mode{
    background-color: black;
    color: white;
}

4. javascript 추가

html에서 이미 button에 onclick속성을 추가해주었기 때문에 위에서 썼던 "darkMode()"라는 이름의 함수를 만든다.
클릭을 하면 저 함수가 실행되는 것이기 때문에 클릭을 했을 때 .dark-mode라는 클래스가 추가되면서 .dark-mode라는 클래스에 적용되어있던 css가 페이지를 다크모드로 만들어준다.

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

이렇게만 하면 버튼 클릭 시 다크모드가 실행되긴 하지만 버튼의 이름이 변경되지 않는다.
조건문을 활용해 다크모드 버튼을 클릭 시 버튼 안의 글자가 Dark Mode라면 Light Mode로 바꿔주고 그렇지 않다면 Dark Mode가 되도록 함수를 입력한다.

function darkMode(){
    var body = document.body;
    body.classList.toggle("dark-mode") 
    //버튼 이름 바꾸기
    var button = document.getElementById("button");
    if(button.innerHTML == "Dark Mode"){
        button.innerHTML = "Light Mode";
    	}else{
        button.innerHTML = "Dark Mode";
    	}
  }