상황
친구에게 사이트를 테스트 해달라고 부탁했는데, 다크 모드여서 다르게 보이는 건지 조금 이상하다고 했다!
내 컴퓨터를 다크 모드로 바꾸고, 접속해보니 라이트 모드에서 보이던 UI들이 안보였다!
그래서 다크 모드여도 라이트 모드처럼 보이게 하는 코드를 추가했다!
해결
:root {
color-scheme: light only;
}
@media (prefers-color-scheme: dark) {
html,
body {
background: #fff !important;
background-color: #fff !important;
color: black;
}
}
css 파일에 다음과 같이 추가해주고,
<Head>
...
<meta name='color-scheme' content='light only' />
<meta name='supported-color-schemes' content='light' />
</Head>_app.tsx 파일에도 다음과 같이 추가하니 다크 모드에서도 라이트 모드의 화면과 동일하게 보인다!
대한민국 최고 개발자가 될거야!