웹 사이트에 다크 모드 구현

2919 단어 reactdesignwebdevjavascript

웹 사이트에서 다크 모드를 구현하는 방법은 무엇입니까?





별이 7.5K개 이상인 darkreader npm 라이브러리를 사용하겠습니다.

Dark Reader를 사용하여 웹사이트에서 다크 모드를 활성화할 수 있습니다.

Install the package from NPM



npm install darkreader


darkreader에서 기본 파일의 es 모듈을 가져올 수 있습니다.

import { enable, disable } from 'darkreader';


enable - Enables dark mode for current web page
disable - Disables dark mode for current web page



웹 사이트에서 다크 모드를 활성화하려면 파일에 그냥 호출enable() 기능을 추가하십시오.

또한 enable 메소드에 매개변수를 전달하여 일부 필터를 사용자 정의할 수 있습니다.

예를 들어,

enable({
    brightness: 100,
    contrast: 90,
    sepia: 10,
});


사용할 수 있는 다음 매개 변수를 지원합니다.
  • 모드: 0 | 1
  • 1 - 어두운 모드, 0 - 어두운 모드

  • [ 밝기 | 그레이스케일 | 대비 | 세피아 ] : 숫자
  • 값 (0 - 100+)
  • 기본값 [ 100 | 0 | 100 | 0 ]

  • useFont: 부울
  • 사용자 정의 글꼴을 사용해야 하는지 여부를 지정합니다
    • .
  • 기본값 false

  • fontFamily: 문자열
  • 사용할 글꼴 패밀리

  • textStroke: 숫자
  • 텍스트를 더 굵게 표시합니다(0 - 1px)
    • .
  • 기본값 0

  • darkSchemeBackgroundColor: 문자열
  • 어두운 모드에 사용할 배경색
  • 기본 #181a1b

  • darkSchemeTextColor: 문자열
  • 어두운 모드에 사용할 텍스트 색상
  • 기본 #e8e6e3

  • lightSchemeBackgroundColor: 문자열
  • 조명 모드에 사용할 배경색
  • 기본 #dcdad7

  • lightSchemeTextColor: 문자열
  • 밝은 모드에 사용할 텍스트 색상
  • 기본 #181a1b

  • scrollbarColor: 문자열
  • 스크롤 막대 색상
  • 기본 자동

  • selectionColor: 문자열
  • 선택 색상
  • 기본 자동


    • 자원



    https://github.com/darkreader/darkreader
    당신의 소프트웨어를 해킹하게 만들지 마세요
    YTK의 간단한 사용 강좌

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage