웹사이트 구현시 이슈가 발생했다.
아이폰이나 안드로이드 크롬 다 정상적으로 보여지는데
삼성 폰에서 기본 브라우저로 접속시에는 사이트의 배경이 검은색으로 자동 변경되어 스타일이 망가지는 것...
해결하려고 여러 방법을 시도해보았지만 실패
* 참고로 삼성 다크모드 기본 설정하는 방법은 (설정>디스플레이>다크선택)
이유는?
현재 삼성인터넷이 다크모드 설정을 강제적으로 바꾸는 기능을 지원해서 이슈가 일어났다..!
prefer-color-scheme으로 dark설정시 변경하려 했지만 삼성에서는 지원하지 않는 기능이어서 적용이 안된던 것.(네이버도 들어가면 스타일 깨짐)
따라서 이는 자체 변경은 불가능하고, 내가 설정한 다크모드시 style을 보기 위해서는 따로 삼성브라우저에서 설정을 변경해야한다.
방법: 개인 삼성기기에서 브라우저 접속> 설정(햄버거버튼클릭하면 있음) >실험실>웹사이트 다크테마사용 on
을 따로 변경해야 내가 설정한 스타일대로 보여진다.
다크모드) 삼성브라우저 색상이 이상하게 나오는 이유와 해결 방법
이번 다크모드 작업할 때 삼성 기본 브라우저(삼성 인터넷)에서 색상이 이상하게 나온다는 QA가 들어와서 이유와 해결 방법을 찾아봤습니다. 삼성브라우저에서만 렌더링이 다르게 나오는 이유
yoonsidae.tistory.com
그래서 나는 해결을?
아래 시도했던 방법으로 기본 흰배경으로 설정해놓고 dark일때도 동일하게 설정해놓았다.
이슈에서는 해결안되었지만 다른 기기 다크모드일때 스타일을 적용하기 위해서다.
삼성 기본 브라우저는 따로 위에서 말했듯 기기 브라우저설정하면 내가 원한 스타일대로 보여진다. (웹사이트 다크테마사용 off면 해결안됨..어쩔수없음..😭)
▼ 시도
index.html
<head>
<meta name="color-scheme" content="light only"/>
<meta name="supported-color-schemes" content="light"/>
</head>
scss
:root {
color-scheme: light only;
}
@media (prefers-color-scheme: dark) {
html,
body {
background: #fff !important;
background-color: #fff !important;
}
}
https://jizard.tistory.com/421
[HTML/CSS] 웹에서 다크모드를 막아보자
다크모드가 대응이 안되있는 상태에서 브라우저 마음대로 색상을 반전시켜서 곤란해질때가 있다. 이럴때는 다크모드를 막아버려야하는데, 다음과 같이 막을 수 있다. :root { color-scheme: light only;
jizard.tistory.com
https://www.daleseo.com/css-prefers-color-scheme/
CSS 미디어 쿼리 prefers-color-scheme (다크 모드)
Engineering Blog by Dale Seo
www.daleseo.com
'HTML & CSS' 카테고리의 다른 글
| [SCSS] 전역 적용 대신 한 파일에서만 사용(module)/중복 클래스 피하기 (0) | 2023.06.21 |
|---|---|
| [css] 광원효과, glow 효과 css style 참고사이트 (0) | 2023.06.07 |
| [CSS] 반응형 미디어 쿼리 - 유튜브 강좌 정리(디자인베이스) (0) | 2023.03.08 |
| [CSS] rem으로 반응형 작성 방법 (0) | 2023.03.08 |
| [SCSS] SCSS 설치, 설정하기 (0) | 2023.03.08 |
