CSS 다크 모드 무시 - CSS dakeu modeu musi

Question

현시점으로 많은 기기에는 다크 모드 기능이 많이 적용되어 있습니다. 다크 모드가 적용된 인터페이스는 어두운 환경에서 사용하였을 때 눈의 피로를 줄여주고, 시력을 조금이나마 보호할 수 있습니다. 이번 시간에는 간단한 코드를 추가함으로, 다크 모드를 감지하고 그에 따라 웹 페이지의 CSS를 변경하는 방법에 대해 자세히 알아보겠습니다.

JS

아래 코드를 JS 파일이나, HTML 파일에 붙여넣으세요.

const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches
console.log(prefersDark);

CSS

아래 코드 수정하여 CSS 파일이나, HTML 파일에 붙여넣으세요.

@media (prefers-color-scheme: dark) {
  /* 다크 모드에 사용 할 CSS를 입력하세요. */
}

예시로 확인하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기기의 다크모드 감지하기</title>
    <script>
        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches
        console.log(prefersDark);
    </script>
    <style>
        body {
            background-color: #ffffff;
        }

        h2 {
            color: #000000;
        }

        @media (prefers-color-scheme: dark) {
            body {
                background-color: #000000;
            }

            h2 {
                color: #ffffff;
            }
        }
    </style>
</head>
<body>
    <h2>Hello, World!</h2>
</body>
</html>

이번 다크모드 작업할 때 삼성 기본 브라우저(삼성 인터넷)에서

색상이 이상하게 나온다는 QA가 들어와서 이유와 해결 방법을 찾아봤습니다.

삼성브라우저에서만 렌더링이 다르게 나오는 이유

해외 개발자가 쓴 글입니다.

https://www.ctrl.blog/entry/samsung-internet-night-mode.html

Everything you need to know about Night mode in Samsung Internet

Night mode in Samsung browser explained. How it breaks page contrast and accessibility, pastelify SVG colors, and why web developers can’t do anything about it.

www.ctrl.blog

렌더링이 이상하게 나오는 이유가 궁금하시면 한 번쯤 읽어보시는 걸 추천드립니다.

이 글의 결론에서도 권장하지 않는다는 내용이 담겨져 있군요 😂

css 미디어쿼리의 시스템 다크모드를 인식하는 prefers-color-scheme 기능이 문제가 되는 건가요?

2020년에 적힌 삼성인터넷 지원 예정 답변,

결론: prefers-color-scheme 지원하지 않음

삼성인터넷 다크모드 prefer-color-scheme 지원

안녕하세요 삼성인터넷 다크모드에서 호환성을 테스트하다가 문의드립니다. 현재 온라인상에서 삼성인터넷은 prefer-color-scheme 지원이 불가하다고 나와있는데 사실인가요? 그리고 혹시 사실이

r1.community.samsung.com

위 답변과 다르게 현재 삼성브라우저는 12 버전 이상이면 해당 기능을 지원하고 있어서 문제가 되지 않습니다.

지원 여부: https://caniuse.com/?search=prefers-color-scheme

"prefers-color-scheme" | Can I use... Support tables for HTML5, CSS3, etc

prefers-color-scheme media query Media query to detect if the user has set their system to use a light or dark color theme.

caniuse.com

이슈 화면과 해결 방법

네이버 메인화면

시스템 다크모드 적용 후에 네이버에 접속한 화면입니다.

특정 색상이 평소보다 진하게 나오는걸 확인할 수 있습니다.

그리고 다음은 해결 방법입니다.

설정 > 실험실 > 웹사이트 다크 테마 사용 메뉴를 ON으로 변경하면

prefers-color-scheme를 사용해서 적용한 다크모드를 보여줄 수 있습니다.

네이버, 애플, 삼성 등의 홈페이지에서는

삼성브라우저 접속 시 다크모드를 아예 적용되지 않게 해결한 것으로 보입니다.

다크모드 작업할 때 삼성브라우저도 적용해야 한다면 위 방법을 고려하시길 바랍니다.

끝!

css 다크모드 토글 scss 다크모드 다크 모드 localStorage 다크모드 퍼블리싱 css 다크모드 만들기

CSS 다크 모드 무시 - CSS dakeu modeu musi

JS

CSS

예시로 확인하기

삼성브라우저에서만 렌더링이 다르게 나오는 이유

css 미디어쿼리의 시스템 다크모드를 인식하는 prefers-color-scheme 기능이 문제가 되는 건가요?

이슈 화면과 해결 방법

관련 게시물

라디오 버튼 수정 - ladio beoteun sujeong

SQL Developer 폰트 추천 - SQL Developer ponteu chucheon

Vue css 적용 안됨 - Vue css jeog-yong andoem

아이폰 라이트모드 안됨 - aipon laiteumodeu andoem

네이버 블로그 코딩 - neibeo beullogeu koding

HTML div 레이아웃 나누기 - HTML div leiaus nanugi

CSS 이미지 전환 애니메이션 - CSS imiji jeonhwan aenimeisyeon

Html table 태그 - html table taegeu

Textarea 수정불가 - textarea sujeongbulga

프레스 형태별 종류 - peuleseu hyeongtaebyeol jonglyu

광고하는

최근 소식

Lg 클립보드 복구 - lg keullibbodeu boggu

세 레비 잡는 법 - se lebi jabneun beob

마세라티 콰트로포르테 풀체인지 - maselati kwateulopoleute pulcheinji

브라질리언 레이저 제모 병원 추천 - beulajillieon leijeo jemo byeong-won chucheon

딸기 씨 키우기 - ttalgi ssi kiugi

스타듀밸리 마우스 오류 - seutadyubaelli mauseu olyu

마우스 자동클릭 설정 - mauseu jadongkeullig seoljeong

갤럭시 A31 단점 - gaelleogsi A31 danjeom

실비 키우기 pc 다운로드 - silbi kiugi pc daunlodeu

식단 조절 없이 근력 운동 - sigdan jojeol eobs-i geunlyeog undong

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의