[Tistory] hello 스킨 다크모드 코드블럭 파이썬 잘 안보이는 현상 해결하기 + 라이트 모드에서 다크모드의 코드블럭 쓰기

 
다크모드로 블로그 쓰는데 너무 눈이 아팠다..
 
대충 이런식으로 안보였음
 

 
 

바꿔야지 생각하면서 그냥 라이트 모드를 기본으로 썼음. 근데 이제 진짜 바꿀때가 됐다.........

 
근데 이걸 단 1초면 바꿀 수 있음
 

1. 티스토리 제공 플러그인을 통해 변경하기

 
설정으로 들어가자
 

티스토리 설정 > 목록에 있는 플러그인 들어가면 티스토리에서 제공하는 플러그인들이 나온다.

 
여기서 코드 문법 강조 클릭
 

 
누르면 아래처럼 나옴

 
아래 블로그 참고했다. 미리 보기 정리 잘해주심 
 
난 대충 Atom One Dark 로 했다
 
https://0secusik0.tistory.com/69

[Tistory] 코드 블럭 테마 변경하기

 
 

 
근데? 이거로 하면 라이트모드에서 잘 안보임(짜증)
 
근데 이걸 또 맞는 테마 찾기도 좀 그렇고 다크모드에서 저 코드가 잘 보여서 테마를 바꾸긴 싫었다.

 
그래서 그냥 css를 설정해서 다크모드에서 보이는 코드 블럭을 라이트 모드에서도 보이게 바꿈
 

2. CSS에서 다크모드의 블럭 화면을 라이트모드에서도 똑같이 보이게 하기

 
티스토리 설정 > 스킨 편집 들어간다.

 
html 편집 > 확인 > CSS 들어가서 컨트롤 + F 누른 후 code.  검색
 

 
그럼 아래의 코드를 바꿔줄거임

// 라이트모드
#article .contents_style pre code.hljs {

  --tw-bg-opacity: 1;

  background-color: rgb(244 244 246 / var(--tw-bg-opacity))
}
// 다크모드
.dark #article .contents_style pre code.hljs {

  --tw-bg-opacity: 1;

  background-color: rgb(41 42 45 / var(--tw-bg-opacity))
}

 
아래처럼 바꾼다 (백그라운드 컬러를 다크모드와 동일하게 바꿈)

// 라이트모드
#article .contents_style pre code.hljs {

  --tw-bg-opacity: 1;

  background-color: rgb(41 42 45 / var(--tw-bg-opacity))
}
// 다크모드
.dark #article .contents_style pre code.hljs {

  --tw-bg-opacity: 1;

  background-color: rgb(41 42 45 / var(--tw-bg-opacity))
}

 
적용 눌러주고 라이트 모드에서 확인해보자
 

 
그럼 이렇게 바뀜 !!
 
이제야 눈이 편해짐
편-안