[리액트] 웹 배포 시 다크모드가 설정되어 CSS가 깨지는 경우엔 ?

문제점 :  배포를 했는데 다크모드가 자동으로 적용 되어 CSS 가 깨져서 나온다.  ex) 하얀색 배경 폼 -> 검정색 배경 폼으로 변경 , 폰트 컬러를 지정해주지 않은 글 -> 하얀색으로 변경 등 

 

저번 프로젝트와 이번 프로젝트를 진행하면서 로컬 환경에서는 문제가 없었지만 배포를 하고 테스트를 하는 과정에서 웹 이용자가 다크모드를 사용할 때 자동적으로 글씨 색상이나 폼 배경 색깔이 변경되는 문제점을 겪었다. 

 

해결은 간단하게 할 수 있었다. 

 

index.css 파일 

:root 에서 color-scheme 부분이 light dark 로 설정되어 있는데 light only 로 바꿔주면 된다. 

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;  /* 이 부분을 light only로 변경해주기 */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}