코딩하는 핑구

요즘은 눈이 부셔서 폰이나 PC화면을 배경색이 어두운 다크모드로 거의 사용하고 있다보니까

내가 만든 웹사이트도 어둡게 보였으면 해서 찾아본 배경 글자 반전 다크모드

반전 예제

css

/* 다크모드 */
.dark-mode {
  background-color: #3e3a3a;
  color: white;
}

참고로 여기서 사용한 배경색은 완전한 검정색은 아니고 조금 진한 먹색

javascript

//다크모드
function useDarkMode() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

window.onload = function() { 	
	useDarkMode();
	
}

위의 코드처럼 작성을 해두면

css랑 자바스크립트만 수정해줘도 다크모드 사용이 가능하다

대신 동적으로 생성되는 객체들은 적용되는게 좀 차이가 있을수있다

나는 버튼 클릭 없이 아예 웹페이지가 열릴때 자동으로 다크모드를 실행하고 싶어서 위의 코드처럼 작성함

버튼클릭으로 배경 글자색을 반전하는 다크모드는 아래의 w3schools 참고하자

이 방식 말고도 되게 다양하게 다크모드를 적용할수있는데

나는 이방법이 제일 간단해서 일단 이렇게 사용했음

참고 : 

https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp