티스토리 다크모드 블로그 글 읽기 페이지에만 적용하기

티스토리 블로그 다크모드 작성하기 모니터의 눈부심을 방지하기 위해 티스토리 블로그 전체에 다크모드를 적용할 수도 있습니다. 그러나 다크모드는 관리하기도 힘들고 여러 가지 오류가 많이 발생하기 때문에 블로그 전체를 다크모드로 만들기에는 약간의 제약이 있습니다. 다크모드를 싫어하는 방문자도 있기에 블로그 전체를 다크모드로 만들기보다는 특정한 페이지, 예를 들면 사진 앨범과 같이 몰입감이 필요한 페이지만 다크모드를 적용시켜 블로그는 일반 모드로 편안하게 보고 특정한 페이지만 강조해서 보는 효과를 얻을 수 있습니다.@ 노마드이데아

▲ 다크모드에 맞는 투명이미지

 

아래의 링크를 클릭하시면 다크모드가 적용된 페이지를 보실 수 있습니다. 클릭한 후 글 읽기 페이지에 다크모드가 어떻게 적용되었는지 먼저 확인해 보시기 바라겠습니다.

 

 

다크모드 적용 전과 적용 후

다크모드 적용전 일반모드(좌)와 다크모드를 적용한 후의 모습(우)

 

글쓰기를 클릭하여 티스토리 에디터에 들어온 다음 HTML편집모드를 클릭합니다.

아래의 코드를 복사합니다.

<div>
<style>
  body {
    background-color: #4d4b4b !important; /* 배경색 */
    color: #939393 !important; /* 기본 글자색 */
  }
  p, span, div, li, h1, h2, h3, h4, h5, h6 {
    color: #939393 !important; /* 모든 글자색 변경 */
  }
  a {
    color: #939393 !important; /* 링크 색상 */
  }
</style>
</div>
<p data-ke-size="size16">&nbsp;</p>

HTML입력창에 복사한 코드를 붙여 넣습니다. (이미 내용이 있다면 최상단에 붙여 넣기 합니다)

기본모드로 돌아와서 콘텐츠를 작성한 후 완료를 클릭하여 발행한 다음 결과를 확인합니다.

 

다크모드를 사용하기 위해서는 아래와 같은 배경이 투명한 이미지를 사용해야 합니다. 그래서 다크모드의 관리가 까다로운 것이죠. 위 오른쪽에 있는 다크모드 버튼을 클릭해 가면서 비교해 보세요.

배경을 투명하게 처리한 이미지와 처리하지 않은 이미지 비교

 

글자색 #939393은

다크모드에서도 모바일 모드에서도

모두 잘 보이는 글자색입니다.

 

주의 사항

다크모드라 하여 제목의 글자색을 잘보이게 흰색으로 지정하면 화면을 크게 볼 수 있는 모바일 모드에서 제목의 글자가 보이지 않습니다. 티스토리 블로그에 배경색을 지정하여 다크모드로 만든다 해도 티스토리 모바일 모드에서는 배경색이 적용되지 않고 흰색을 유지하므로 만약, 글씨를 흰색이나 노란색과 같이 밝은 색을 지정하면 제목을 읽기가 어려운 것입니다. 그래도 다크모드에서 제목을 흰색으로 사용하고 싶다면 아래의 코드를 사용하세요!

 

<div>
<style>
  body {
    background-color: #4d4b4b !important; /* 배경색 */
    color: #939393 !important; /* 기본 글자색 */
  }
  p, span, div, li {
    color: #939393 !important; /* 일반 텍스트 색상 */
  }
  h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important; /* 제목 글자색을 흰색으로 */
  }
  a {
    color: #939393 !important; /* 링크 색상 */
    text-decoration: none; /* 밑줄 제거 */
  }
  a:hover {
    color: #cfb35f !important; /* 마우스를 올렸을 때 색상 변경 */
  }
</style>
</div>
<p data-ke-size="size16">&nbsp;</p>

 

 

 

 

맨 위로 ▲