댓글 검색 목록

[javascript] Javascript & CSS — 사용자가 선호하는 구성표를 기반으로 dark theme / light theme를 토글합니다…

페이지 정보

작성자 운영자 작성일 20-02-13 17:20 조회 848 댓글 0

이 블로그는 사용자의 선호에 따라 어두운 테마와 밝은 테마를 전환하는 방법에 중점을 둡니다.

https://gosink.in/javascript-css-toggle-dark-light-theme-based-on-your-users-preferred-scheme/

macOS X, Windows 10, Android 등과 같은 모든 주요 플랫폼에서 dark theme가 출시 된 후 특히 개발자들 사이에서 매우 유명해졌습니다.

사람들은 또한 그것이 눈의 피로를 줄이는 데 도움이 된다고 생각합니다.

이는 색상과 대비가 제대로 선택되지 않은 경우에만 해당됩니다.

또한 일부 OLED / AMOLED 화면의 배터리를 절약합니다.

UI / UX 개발자에게 있어 두 개의 분리되고 똑같이 아름다운 디자인을 구축하는 것은 새로운 (선택 사항) 과제입니다.

또한 사용자가 선호하는 색 구성표를 분석하는 것이 유용합니다.

이 블로그에서 이 두 테마를 전환 할 수도 있습니다. 이 블로그 (Ghost의 Casper 테마를 사용하고 있음)에도 이 기능이 있습니다.

어떻게 작동합니까?

단순한 미디어 쿼리일 뿐입니다 : prefers-color-scheme

이 쿼리는 미디어 쿼리 레벨 5 초안에 도입되었으며 다음과 같은 값을 가질 수 있습니다.

light : 사용자는 라이트 테마가 있는 페이지를 선호합니다. 일반적으로 어두운 글꼴이 있는 밝은 배경.
dark : 사용자는 테마가 어두운 페이지를 선호합니다. 상대적으로 밝은 글꼴이 있는 어두운 배경.
no-preference : 이는 시스템이 사용자의 기본 설정을 모르는 것을 의미합니다. 이 경우 일반적으로 조명 테마를 표시하는 것을 선호합니다.

CSS를 사용하여 dark 테마 활성화

CSS를 사용하여 여러 가지 방법으로 이를 수행 할 수 있습니다.

CSS 파일 내에서 미디어 쿼리 사용하기 :

앱에서 dark 테마를 구현하는 가장 간단한 방법입니다. 브라우저가 dark 테마를 지원하면 거의 모든 경우에 작동합니다. 아래 예는 이 점을 설명하는 가장 간단한 예일 수 있습니다.

/* style.css */ body { background-color: #fafafa; color: #222222; } @media(prefers-color-scheme: dark) { body { background-color: #222222; color: #fafafa; } }

<link> 태그에서 미디어 쿼리 사용 :

이 경우 까다로운 부분이 있습니다. 이 미디어 쿼리가 브라우저에서 지원되지 않으면 모든 CSS가 로드됩니다.

따라서 그러한 경우 하나의 테마를 선호해야 합니다. 위의 예에서 미디어 쿼리가 실패하더라도 밝은 테마가 어두운 테마를 재정의 함을 알 수 있습니다.

그렇다면 왜 자바 스크립트가 필요한가?

경우에 따라 CSS 전용 접근 방식으로는 충분하지 않습니다.

예를 들어, 사용자가 선호하는 분석 체계를 알고 싶다면 또는 Javascript (다른 API 호출 일 수 있음)를 사용하여 다른 텍스트 / 이미지를 로드하고 테마 변경에 대한 리스너를 원합니다. CSS로는 이러한 것들을 처리 할 수 없습니다.

Javascript를 사용하여 선호하는 테마를 확인하십시오.

if (window.matchMedia('prefers-color-scheme: dark').matches) { // It's a dark theme... } else { // It's not a dark theme... }

windowMedia에 matchMedia가 있는지 확인하는 것을 잊지 마십시오. 브라우저에서 지원하지 않으면 오류가 발생할 수 있습니다.

테마의 변화를 들어보십시오 :

사용자는 웹 사이트에 액세스하는 동안 테마를 변경할 수 있습니다.

위의 코드는 테마의 변화를 감지하는 데 도움이 되지 않습니다.

이를 위해서는 사용자가 선호하는 테마의 변경 사항을 수신하는 청취자가 필요합니다.

window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { if (e.matches) { console.log('dark mode is enabled'); } else { console.log('dark mode is disabled'); } });