카테고리 없음

[티스토리 hELLO 스킨] 코드블럭 다크모드로 고정하기

정구미 2023. 9. 9. 17:49

티스토리를 처음 만들면서 제일 깔끔한 스킨이 뭐가 있을까 찾아보다가  hELLO스킨을 알게 되었다.

(이렇게 예쁘고 깔끔한 스킨을 무료로 편하게 사용하게 해주신 개발자님 감사합니다🙇)

 

🔗 스킨 소개 바로가기

https://pronist.tistory.com/5

 

hELLO 티스토리 스킨을 소개합니다.

hELLO 스킨은 초기에 기능이 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의

pronist.tistory.com

 

 

다른 사람들처럼 나도 스킨을 내 입맛에 맞게 하나 둘 수정하며 사용하던 중 

코드블럭이 라이트모드에서는 라이트모드로, 다크모드에서는 다크모드로 보이는 것을 알았다.

 

평소 코드들은 다크모드로 보는 것이 익숙한 나는, 스킨이 라이트모드일때도 코드블럭은 다크모드로 보이도록 수정했다.

스킨 편집에서 아주 간단하게 html,css 두가지만 수정하면 된다.

 

 

👇 스킨의 코드 하이라이팅에 대한 개발자님 말씀

 

 

📌 스킨 수정하기

1. HTML 수정하기

스킨 편집 > HTML에서 아래 코드를 검색한다.

${dark ? skinOptions.hljsDark : skinOptions.hljs}

아마도 "다크 모드일때 스킨 옵션이 다크모드이고, 다크모드가 아닐 때 스킨 옵션이 일반모드이다."

라는 삼항연산자로 추측해본다...

 

HTML 코드 검색 모습

 

 

 

그래서 코드를 아래와 같이 수정했다.

${dark ? skinOptions.hljsDark : skinOptions.hljsDark}

다크모드가 아닐 때에도 다크모드 스킨이 보일 수 있도록...

적용하면 아래처럼 코드가 나온다.

코드 스타일만 변경된 모습

개발자님 말에 따르면, 테마가 바뀌어도 코드 스타일을 바뀌지만 배경은 바뀌지 않을거라고 했다.

그래서 코드 배경을 찾아서 바꿔주기로 했다.

 

 

2. CSS수정하기

스킨 편집 > CSS에서 아래 코드를 검색한다.

#content .contents_style pre code.hljs

CSS 코드 검색한 모습

일반 모드와 다크모드일 때 배경색상을 말하는 것 같다.

#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));
}

CSS 코드 수정한 모습

 

적용하면

이렇게 배경이 검은색으로 바뀐것을 볼 수 있다.

 

 

이제 모든 모드에서 코드블럭만은 다크모드로 보일 수 있게 되었다~✌️