모바일 강제 다크모드 (트러블슈팅)

 

트러블

이번엔 프론트엔드에서 발생한 문제였다.

문제해결에 시간이 오래걸리진 않았지만 특이하다고 생각되서 트러블 슈팅에 저장해놓고 기억해두려고한다.

 

이제 서버에 페이지를올리고 어느정도 확인을 하면서 진행중인데. 모바일과 컴퓨터에서 보는화면이 달랐다.

 

크롬웹으로본 반응형 웹페이지.

모바일로 본 반응형 웹 페이지

 

분명히 서버에올라가있는 같은 페이지인데 모바일에서보면 글씨가 하얗게 날아갔다. 

하나씩 비교해보니 휴대폰이 다크모드여서 그런가 싶어서 데스크톱쪽도 다크모드로 변경하고 봤지만 똑같았다.

 

원인

그래서 모바일에서는 다크모드일때 검정색인 부분은 모두 강제로 하얗게 변경한다는 점을 발견했다. 

데스크톱에서는 다크모드일때 적용될 css를 따로 만들어서 넣어주어야하지만 

모바일에서는 별도로 다크모드 css를 적용해주지않아도

검은색은 하얀색으로 하얀색은 검정색을 반전시켜주는 효과가있었다.

그래서 color가 따로 지정되어있지않은 <p> 태그에 있는 검정글자들이 모바일에서 하얗게 변경되어서 안보였던것이다.. 

 

해결

문제는 text-color 를 적용해주면서 간단하게 해결되었다.

text-color 적용후