[티스토리 hELLO 스킨] 코드블럭 다크모드로 고정하기
티스토리를 처음 만들면서 제일 깔끔한 스킨이 뭐가 있을까 찾아보다가 hELLO스킨을 알게 되었다.
(이렇게 예쁘고 깔끔한 스킨을 무료로 편하게 사용하게 해주신 개발자님 감사합니다🙇)
🔗 스킨 소개 바로가기
hELLO 티스토리 스킨을 소개합니다.
hELLO 스킨은 초기에 기능이 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의
pronist.tistory.com
다른 사람들처럼 나도 스킨을 내 입맛에 맞게 하나 둘 수정하며 사용하던 중
코드블럭이 라이트모드에서는 라이트모드로, 다크모드에서는 다크모드로 보이는 것을 알았다.
평소 코드들은 다크모드로 보는 것이 익숙한 나는, 스킨이 라이트모드일때도 코드블럭은 다크모드로 보이도록 수정했다.
스킨 편집에서 아주 간단하게 html,css 두가지만 수정하면 된다.
👇 스킨의 코드 하이라이팅에 대한 개발자님 말씀
📌 스킨 수정하기
1. HTML 수정하기
스킨 편집 > HTML에서 아래 코드를 검색한다.
${dark ? skinOptions.hljsDark : skinOptions.hljs}
아마도 "다크 모드일때 스킨 옵션이 다크모드이고, 다크모드가 아닐 때 스킨 옵션이 일반모드이다."
라는 삼항연산자로 추측해본다...
그래서 코드를 아래와 같이 수정했다.
${dark ? skinOptions.hljsDark : skinOptions.hljsDark}
다크모드가 아닐 때에도 다크모드 스킨이 보일 수 있도록...
적용하면 아래처럼 코드가 나온다.
개발자님 말에 따르면, 테마가 바뀌어도 코드 스타일을 바뀌지만 배경은 바뀌지 않을거라고 했다.
그래서 코드 배경을 찾아서 바꿔주기로 했다.
2. CSS수정하기
스킨 편집 > CSS에서 아래 코드를 검색한다.
#content .contents_style pre code.hljs
일반 모드와 다크모드일 때 배경색상을 말하는 것 같다.
#content .contents_style pre code.hljs 의 background-color를
.dark #content .contents_style pre code.hljs 와 똑같이 바꿔주면 된다.
#content .contents_style pre code.hljs {
--tw-bg-opacity: 1;
background-color: rgb(41 42 45 / var(--tw-bg-opacity));
}
적용하면
이렇게 배경이 검은색으로 바뀐것을 볼 수 있다.
이제 모든 모드에서 코드블럭만은 다크모드로 보일 수 있게 되었다~✌️