⚠️ 다크모드 관련 문제

 

JavaFestival 카테고리와 관련해서 공지 올립니다.

 
(현재 시간 2024.11.11 기준)
제 블로그에서 JavaFestival 카테고리 게시물 등은 다크모드로 이용하실 경우 글자 블럭마다 흰 색 배경이 나타나는 문제를 겪고 있습니다.
따라서 해당 카테고리를 이용하시는 분들은 반드시 블로그 하단의 다크모드/라이트모드 전환 버튼을 눌러 '라이트모드'상태에서 이용해주시길 바랍니다.

블럭마다 흰색 배경이 나타나는 현상

 

 
 
해당 문제가 나타나는 이유는 타 사이트에서 티스토리로 글을 복사 + 붙여넣기 한 경우 불필요한 태그들이 함께 추가 되는 현상입니다.

저는 이 블로그를 운영하기 전 네이버 블로그를 먼저 운영하고 있었는데,
제 네이버 블로그에 먼저 포스팅한 글을 그대로 티스토리로 옮겨 오는 과정과 해당 코드에 관한 설명을 발췌해 오는 과정에서 무분별하게 쓰레기 태그값들이 함께 복사가 된 것으로 확인이 되고 있습니다. 이전까지는 라이트모드를 이용하느라 잘 몰랐는데,  최근 다크모드로 커스텀을 하던 중 제 블로그에서 기존에 포스팅한 글들 중 상당부분이 해당 문제를 겪고 있는 것을 알게 되었습니다. 

---

 

⚠️이런 현상이 발생하는 원인

아래 링크를 타고 블로그에 가시면 잘 설명이 되어 있습니다.
https://puleunhaneulkr.tistory.com/99

티스토리에 타사이트 글을 복사 붙여 넣기하면 어떤 문제가 생길까?

 

---

⚠️ 다크모드에서 글씨가 어둡게 보이는 현상(해결)

기존에 다크 모드에서 글씨가 어둡게 보이는 현상, 배경색이 지정되는 현상은 아래 블로그를 참조하여 해결했습니다. (2024.11.11)

.dark span[style*="color: #333333; text-align: start;"],
.dark span[style*="color: #000000; text-align: start;"],
.dark span[style*="color: #333333;"],
.dark span[style*="color: #000000;"],
.dark span[style*="background-color: #ffffff;"],
.dark h1[style="background-color: #ffffff; color: #000000; text-align: start;"],
.dark h1[style*="color: #000000; text-align: start;"],
.dark h2[style*="color: #000000; text-align: left;"],
.dark h2[style*="color: #000000; text-align: start;"],
.dark h2[style="background-color: #ffffff; color: #000000; text-align: start;"],
.dark h3[style="background-color: #ffffff; color: #000000; text-align: start;"],
.dark h3[style*="color: #000000;"][style*="text-align: left;"],
.dark h3[style*="color: #000000;"][style*="text-align: start;"],
.dark h3[style*="color: #333333;"][style*="text-align: start;"],
.dark h4[style*="color: #333333;"][style*="text-align: start;"],
.dark h4[style*="color: #000000;"][style*="text-align: start;"],
.dark ol[style="list-style-type: decimal; color: #000000; text-align: start;"],
.dark ul[style="list-style-type: disc; background-color: #ffffff; color: #212529; text-align: start;"],
.dark ul[style="list-style-type: disc; background-color: #ffffff; color: #000000; text-align: start;"][data-ke-list-type="disc"],
.dark li[style="list-style-type: decimal; color: #666666;"],
.dark li[style="list-style-type: disc; color: #666666;"],
.dark p[style="color: #333333; text-align: start;"],
.dark p[style="color: #000000; text-align: start;"],
.dark p[style="background-color: #ffffff; color: #000000; text-align: start;"]{
    background-color: rgb(30, 31, 33) !important;
    color:  #fff  !important;
}

 

이건 티스토리의 예전부터 발생하던 복사 붙여넣기를 하면 자동으로 이상한 태그들이 발생하는 오류를 편법으로 수정하는 방법이다. 저 span태그들이 붙어있으면 평소에는 이상없어보이는데, 다크모드로 바꾸거나 할 때 글씨가 이상해진다.

따라서 css편집에 들어가서 아래 style을 붙여넣어준다. 저 태그들을 가진 것들은 강제적으로 글씨 색상과 배경색상을 정해주는 것이다.
이걸해도 안되는 부분들이 있다면 글 작성시 에디터에서 html모드로 들어가서 문제가 발생하는 태그를 복사하여 앞에 .dark를 붙인뒤 맨위에 붙여넣고 ,를 잊지말고 적어주면 된다. 아래 css 위에 이어서 작성해주면 된다.

 
출처: https://changsroad.tistory.com/418#4. 티스토리 span 태그 없애기 (티스토리 버그)-1 [Let's be Developers:티스토리]
 

---

 ⚠️ 문단 마다 흰색 배경이 생기는 문제 (해결완료)

25.01.28 현재 JavaFestival카테고리에 있는 글들은 모두 수정완료

하지만 위 코드만으로 텍스트블럭에 하얀 배경이 생기는 부분을 모두 제거하지는 못했고 개별적으로 글을 수정하지 않으면 해결할 수 없는 현상으로,  제가 기존에 발행한 300개의 글을 빠른 시간 내에 모두 수정하기는 어려울 것 같아서 라이트모드로 봐 주시기를 당부드립니다. 

---

 

⚠️코드 블럭 테두리 문제 (해결완료)

또한 다크모드에서 코드블럭 테두리에 하얀색 모서리가 나타나는 현상을 발견하였습니다. 빠른 시간 내에 해결하겠습니다.