html dataset 을 사용한 css switch case

현재 블로그를 조금 커스텀을 했는데, 다크 모드일때 코드블럭의 글자가 보이지 않는 상황이 발생했다.

 

코드 블럭의 태그는 다음과 같다. 

처음에는 간단하게 querySelector 를 사용해서 해당 태그의 css 를 만져 글자 색 바꿔주면 되겠네 생각을 했다.

근데 이상하게 해당 태그에 대한 DOM 을 얻을 수가 없었다.

html 이 생성되기전에 js 가 실행되서 그런가 싶었다.

따라서 html이 다 그려지고 나서 js 를 실행하려 onload를 사용해봤지만 그래도 안되더라.

흠.. 알수없었다. 

그래서 우회방법을 찾았다.

 

현재 html 의 dataset 인 theme 은 라이트모드 일때는 'light' , 다크모드 일때는 'dark' 가 할당되고 있다.

그래서 dataset에 따라 css 를 변경하기로 했다.

이런식으로 말이다.

html[data-theme='dark'] code.hljs {
  color:#dcdcdc ;
}

html[data-theme='light'] code.hljs {
  color:rgb(56, 58, 66);

오히려 위에서 실패한 방법보다 이 방법이 더 좋은 것 같다. 그 이유는 js 로 querySelector 를 사용해 코드블럭의 글자색을 바꿔줄때에도 dark 모드인지 light 모드인지 알아했다. 따라서 dataset 이 무엇인지 참조해야했다. 

 

어차피 둘다 dataset 의 정보를 알아야한다면, js 로 DOM element 에 접근하여 style 을 고치는 것 보다, css 선에서 작업을 끝내는게 더 에러가 생길 확률이 적기 때문이다.

 

여튼 그렇게해서 새롭게 알게된 것이 있는데, 이렇게 상위태그의 dataset 을 사용해서 하위태그의 css 의 case 를 다양하게 변경할 수 있다는 것이다.

 

마치 if 문 처럼 말이다.

html[data-theme='dark'] code.hljs {
  color: #dcdcdc ;
}

html[data-theme='light'] code.hljs {
  color:rgb(56, 58, 66);
}
html[data-theme='passion'] code.hljs {
  color:red;
}

 

 

정리

상위 태그의 dataset을 활용하면 하위태그의 js 없이 css 를 case에 맞게 변경할 수 있다.