HTML
웹에서 다크모드 css 적용 관련 하여… 웹과 모바일(아이폰과 안드로이드) 브라우저에서 다크모드 관련하여 css 적용되는 여부를 테스트해 본 결과와 현재 문제점에 관한 이야기를 써 보려 한다.
솔직히 아직 해결 안 된 부분이 있어서…
너무나 많은 분이 이미 쓰고 계셔서 간단히 말하자면 다크 모드(Dark Mode)는 컴퓨터 시스템이나 웹 브라우저, 모바일 앱이나 브라우저 등 사용자가 “어둡게” 모드를 이용하여 배경을 어둡게, 글씨를 밝게 하여 사용하는 것이다.
어두운 화면이 많아져서 생기는 시각적으로 덜 피로하고, 일부 기기에서는 전력 소모를 줄일 수 있다.
물론 너무 밝은 화면에서 다크모드가 잘 안 보일 수 있는데 그럴 경우 원래 모드로 전환하면 된다.
크롬 브라우저 우측 세로 점 3개 버튼을 클릭 하면 → 팝업창이 뜨는데 → [설정] 눌러준다.
설정 페이지 들어가서 좌측 메뉴에 보면 [모양] 페이지로 들어간다.
모양 메뉴 안에서 [모드] 부분으로 밝게 = 일반 밝은 바탕 어두운 텍스트고 / 어둡게 부분이 일반 다크모드인 어두운 배경에 밝은 텍스트 / 기기는 안드로이드 경우 브라우저 설정과 달리 기기 자체에서 어둡게 설정이 가능한데 그 기기 설정을 따라가는 거다.
크롬 페이지 우측 오버플로 메뉴 버튼(세로 점3개 짜리) 클릭하면 → [설정] → [테마] → [어둡게] 로 설정하면 다크모드가 적용 된다.
인터넷 브라우저 우측 하단에 메뉴 버튼 → [설정] → [웹페이지 보기 및 스크롤 방식] → [어두운 화면 모드] → [사용] 으로 적용 된다.
원래 다크 모드는 앱이나 브라우저 별로 각각 설정해서 쓰는 다크모드이지만, 삼성 갤럭시 폰의 경우 기기 자체에서 전체적으로 어둡게 모드가 설정 가능하다.
이럴 경우 각각의 브라우저나 앱에서는 어둡게가 아닌, ” 휴대전화 설정 따름” 이나 “기기”로 설정되어 있으면 기기의 설정에 따라 다크 모드가 자동 적용 된다.
휴대폰 화면에서 우측 아래로 스크롤 2번 하게 되면 “빠른 설정 창”이 열리는데
하단에 달 모양 버튼을 눌러주면 – 전체적으로 다크모드로 변경된다.
내 경우 휴대폰 자체 개인적 테마를 쓰고 있어서 변화가 드라마틱하진 않지만~ 전체적으로 폰이 어두워지고~ 브라우저등은 어두운 바탕화면으로 바뀐다.
이번 테스트에 가장 놀란 게 있는데…. 어둡게 모드가 다크 모드는 아니라는 거였다.
일단 그 이야기 하기 전에~
크롬 브라우저와 아이폰은 다크 모드가 맞았다. 즉, 다크모드에 관한 css 코드를 쓸 수 있다.
자 이제 테스트 화면인데~
1번 화면을 보면 – 일반 모드에서의 화면이다.
2번 화면은 – 크롬에서 브라우저 설정을 다크 모드로 적용한 화면이다.
차이점이 보일까? 2번의 크롬 UI를 보면 검정색 배경으로 바뀌었다.
이미지가 있는 본문 부분이 하얀 이유는 다크모드에 따로 설정 코드를 넣어주지 않았기에 본문 html은 기존과 동일하게 보인다.
아이폰도 동일한 화면을 보았다.
그러면 이번에 다크 모드 관련하여 작업을 해주면? 배경은 검정색을 넣고 글자는 흰색으로 css 추가해 주었다.
@media (prefers-color-scheme: dark) {
body{background-color:black; color:white;}
}그러면 3번처럼 이미지와 배경색이 변경된 것을 확인할 수 있다. 거기다 상위 크롬 UI가 검정색이니 다크모드 상태이다.
그럼 이제.. 이 후 문제가 될 테스트 화면인데
@media (prefers-color-scheme: dark) {
body{background-color:gold; color:red;}
}같은 코드 방식으로 배경은 금색으로 글 색은 붉은색으로 변경하였더니 4번처럼 적용되는 걸 일단 확인 하였다.
자 동일한 실험을 안드로이드 폰의 대표 브라우저인 인터넷이라 불리는 브라우저로 해봤다.
일단 5번은 기존 아무것도 하지 않은 기본 화면이다. 상위 하얀 UI.
이제 휴대폰 기기 설정에 “어두운 모드”로 변경을 하였더니 다른 css 작업을 하지 않아도 6번처럼 변경 되었다.
응?
@media (prefers-color-scheme: dark) {
body{background-color:black; color:white;}
}이 코드를 사용하지 않았는데 바탕은 어둡게, 글자는 밝은 글로 변경 되었다.
오히려 더 편한가? 하는 순간… 문제가 발생 했다.
@media (prefers-color-scheme: dark) {
body{background-color:gold; color:red;}
}변경 확인을 위해 위 코드를 넣었는데… 6번 화면에서 변경이 없었다.
즉, 일반 적으로 다크모드로 적용을 할 수 있는 @media (prefers-color-scheme: dark){} 코드가 먹 질 않는다.
조금 더 세밀하게 보기 위해서
body{background-color: white; color:black;}
@media (prefers-color-scheme: dark) {
body{background-color:gold; color:red;}
}기본 바탕색은 흰색(255, 255, 255), 글자 색은 검정색(0,0,0)
다크모드 css 코드에 바탕색은 골드(255,215,0), 글자색 빨강(255,0,0)으로 먼저 지정하였다.
기본값과 다크 모드에서 배경색과 텍스트 색을 보면 제대로 들어가 있는 게 보인다.
추가로 일반에서는 prefers-color-scheme 는 false지만, 다크모드에서는 prefers-color-scheme 값이 true로 바뀐 것도 볼 수 있다.
배경과 텍스트 색이 기본 선언된 색이 일반, 어두운 모드 같은 값을 가진다.
거기다 어두운 모드지만, prefers-color-scheme 는 false로 나온다.
즉, 다크모드 미디어쿼리를 쓸 수 없는….
지금 기준으로.. 아직까진 답이 없어 보이는데.. 휴.. 어떤 정보를 가져와야 직접 수정이 가능할까? ㅠㅡㅠ~
일단 내 마음속 기준은 안드로이드 인터넷 브라우저는 다크 모드가 아니라 어두운 모드라~ 기존 다크 모드랑 다르다! ㅠㅠ 어떻게 처리하면 될까요~~~?
혹시 안드로이드 휴대폰의 “인터넷“이라는 브라우저에서 다크 모드 상태의 css 코드 적용 방법을 알고 계시면..
죄송하지만 관련 정보를 메일 주시면 정말 정말 감사드립니다.
기타 HTML 및 css 정보: https://pixiclue.com/weblab/html/