발생상황
다크모드를 따로 주지 않았는데 배경화면과 입력출력창이 모두 검정색으로 보이고 있음. body에 backgroung-color : #fffff;를 주어도 부분만 하얀색으로 적용되고 있음.
@charset "UTF-8";
@font-face {
font-family: 'NanumSquareNeo-Variable';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
html > body {
font-family: 'NanumSquareNeo-Variable', sans-serif;
text-underline-position: under;
}
.table-box-type > table {
width: 100%;
}
/*.table-box-type > table th, .table-box-type > table td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
*/
.table-box-type > table th {
background-color: rgb(165, 125, 208);
color: white;
}
.table-box-type > table td {
background-color: rgb(243, 238, 247);
transition: background-color 0.3s ease;
}
.table-box-type > table td:hover {
background-color: rgb(223, 203, 243); /* 연한 하늘 색상 */
}
a {
color: rgb(194, 156, 233);
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: rgb(64, 0, 128); /* hover 시 색상 변경 */
}
.btns > .btn-text-color{
color: black;
background-color: #ffffff;
}
.btns > .btn-text-color:hover{
color: blueviolet;
}발생이유
테일윈드의 문제인가 싶었는데 하나씩 빼가면서 확인해 본 결과 데이지 ui에서 일어나는 문제였다. 데이지 ui의 코드를 빼면 다크모드가 해제된다.
문제 상황을 보면, 데이지UI가 다크 모드를 자동으로 적용하고 있는 것 같다. 데이지UI는 Tailwind CSS 위에 구축된 컴포넌트 라이브러리로, 기본적으로 시스템의 컬러 스킴을 따라 다크 모드를 자동으로 적용하도록 설계되어 있을 수 있다. 이 경우, 사용자의 OS 설정이 다크 모드일 때 웹사이트도 다크 모드로 자동 전환되는 것이다.
해결방법
1. 다크 모드 강제 비활성화
데이지UI를 사용할 때, 다크 모드를 강제로 비활성화하려면 Tailwind CSS의 설정 파일(tailwind.config.js)에서 다크 모드 옵션을 조정할 수 있습니다.
module.exports = {
darkMode: false, // 'media' or 'class' 중에서 선택하거나 false로 비활성화
// 기타 설정...
}이 설정은 Tailwind CSS의 다크 모드 기능을 완전히 비활성화합니다. 만약 tailwind.config.js 파일이 프로젝트에 없다면, 파일을 생성하고 위의 설정을 추가해야 합니다.
2. CSS 커스텀
단순히 body 태그에 background-color: #ffffff;를 적용했을 때 제대로 적용되지 않는다면, CSS의 우선순위 문제일 수 있습니다. 이를 해결하기 위해 CSS에서 !important 규칙을 사용하여 body의 배경색을 강제로 적용할 수 있습니다.
html, body {
background-color: #ffffff !important;
}3. 데이지UI 다크 모드 클래스 제거
데이지UI에서는 다크 모드를 클래스를 통해 제어할 수도 있습니다. 데이지UI의 다크 모드가 class 모드로 설정되어 있다면, HTML 문서나 JavaScript를 통해 해당 클래스를 제거하여 다크 모드를 비활성화할 수 있습니다.
HTML에서 다크 모드 클래스를 제거하는 예시:
<body class="light"> <!-- 다크 모드 클래스를 제거하고 light 클래스를 추가 -->JavaScript에서 다크 모드 클래스를 제거하는 예시:
document.documentElement.classList.remove('dark');결론
데이지UI의 다크 모드가 자동으로 적용되는 문제를 해결하기 위해서는 위에서 언급된 방법들을 시도해보면 된다.. 설정이나 코드의 변경이 반영되지 않는다면, 프로젝트를 다시 빌드하거나 브라우저의 캐시를 지우고 다시 시도해보는 것이 좋다.
