다크 모드에서 텍스트가 보이지 않는 문제

문제

다음 사진과 같이 라이트 모드에서는 텍스트가 잘 보이지만, 다크 모드에서는 잘 보이지 않는 문제가 있었습니다.

환경

운영체제, 브라우저, 의존성 목록 등

• Windows 11
• Chrome
• Next.js v15.0.2

설명

다크 모드에서도 UI가 잘 보여야 하지만, 다크 모드에서는 일부 UI가 잘 보이지 않는 문제가 발생하였습니다.

---

해결 과정

해당 문제는 다크 모드 관련 설정을 하지 않았기 때문에 발생한 문제입니다. 따라서 globals.css 을 수정하여 다크 모드를 라이트 모드로 통일하기로 결정하였습니다. 다음은 수정 전 globals.css 입니다.

/* globals.css */

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

---

해결

다음과 같이 다크 모드를 라이트 모드로 통일하면서 문제를 해결하였습니다.

/* globals.css */

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: light;
  }
}