정보실

웹학교

정보실

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

본문

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


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 초안에 도입되었으며 다음과 같은 값을 가질 수 있습니다.


  1. light : 사용자는 라이트 테마가 있는 페이지를 선호합니다. 일반적으로 어두운 글꼴이 있는 밝은 배경.
  2. dark : 사용자는 테마가 어두운 페이지를 선호합니다. 상대적으로 밝은 글꼴이 있는 어두운 배경.
  3. 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> 태그에서 미디어 쿼리 사용 : 


<head> <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)"> <link rel="stylesheet" href="light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)"> </head> 


이 경우 까다로운 부분이 있습니다. 이 미디어 쿼리가 브라우저에서 지원되지 않으면 모든 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'); } }); 


구현 및 모범 사례에 대한 자세한 내용을 보려면 다음 링크를 확인하십시오.


https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6

https://material.io/design/color/dark-theme.html

https://www.toptal.com/designers/ui/dark-ui


구현



브라우저 지원 


현재 (2020 년 2 월) 어두운 모드는 모든 최신 버전의 주요 브라우저에서 지원됩니다. 

그러나 여전히 대상 사용자의 브라우저에서 지원되는지 확인해야 합니다.


https://caniuse.com/#search=prefers-color-scheme





  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 14회 ]  작성일20-02-13 17:20

웹학교