수야나도 블로그

헬로스킨은 다크모드/라이트 모드를 지원하기 때문에 코드블럭이 그에 따라 변하는데요, 이를 원하는 테마로 바꾸고 고정시키는 방법을 알아보겠습니다.

코드블럭 테마변경

우선 코드하이라이트 테마를 고릅니다.

highlight.js demo

highlightjs.org

샘플을 보고 원하는 테마를 골라 이름을 복사합니다.

티스토리 관리자 페이지에 접속 shift + Q -> 스킨 편집에 들어갑니다.

html편집에 들어가지 마시고 스킨편집 메인 페이지에서 스크롤을 내리다 보면 위 항목이 나옵니다.

헬로 스킨은 이렇게 코드 하이라이팅 테마 지정 기능을 지원하기 때문에 새로 html 코드를 수정하지 않아도 됩니다.

아까 복사했던 테마를 붙여넣고 대문자는 > 소문자로 띄어쓰기는 > - (하이픈) 으로 변경해 주세요.

새로고침을 해보면 테마는 적용되었지만 backgroundcolor 컬러가 바뀌지 않은 것을 확인할 수 있습니다.

이유는 헬로 스킨 자체에서 배경색을 고정해 놓았기 때문입니다.

이를 수정하러 갑시다.

다시 스킨편집 -> css 수정에 들어갑니다.

hljs 라고 검색해 해당 부분을 찾습니다.

저는 새로 색을 고를필요없이 다크모드의 배경색을 그대로 라이트 모드에서 사용하도록 코드를 바꿔주었습니다.

저장 후 다시 확인해보면 잘 바뀐 것을 볼 수 있습니다.

.element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.75);
}