웹 사이트를 폭발 속도로 어둡게 만들기 (Darmode.js)

개시하다

맥OS 무제브에서 다크 모드가 탑재됐고, i0S13도 다크 모드가 적용된다.유행하는 이런 어두운 모델은 에너지를 절약하고 눈을 보호하는 장점이 있다고 하지만 개인적으로는 단순히'멋있다'고 생각한다.(문외한의 관점에서 볼 때, 나는 그가'이 녀석·정말 잘하네'공연을 할 것이라고 제멋대로 생각했다.)

폭발 속도로 WEB 사이트를 어둡게 만드는 데모드js

앱에 따라 이미 어두운 패턴과 검은 배경을 형성할 수 있는 것이 있었지만, 내 사이트가 폭발 속도로 어두워질 수 있다는 것을 발견Darkmode.js해 봤다.
말은 비록 이렇게 말하지만, 사실은 매우 간단하다. 단지 네 줄뿐이다.
CSS:mix-blend-mode를 사용하기 때문에 Can I USE에서 지원을 조사하는 것이 좋을 것 같습니다.

추가할 코드

sample.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

옵션

sample.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>
  var options = {
    bottom: '64px', // default: '32px'
    right: 'unset', // default: '32px'
    left: '32px', // default: 'unset'
    time: '0.5s', // default: '0.3s'
    mixColor: '#fff', // default: '#fff'
    backgroundColor: '#fff',  // default: '#fff'
    buttonColorDark: '#100f2c',  // default: '#100f2c'
    buttonColorLight: '#fff', // default: '#fff'
    saveInCookies: false, // default: true,
    label: '🌓', // default: ''
    autoMatchOsTheme: true // default: true
  }

  const darkmode = new Darkmode(options);
  darkmode.showWidget();
</script>

견본

샘플 1

Darkmode.js

샘플 2

샘플 3

여기 기사. 웹 사이트에 설치 - 그 회의 얼마예요?

잡담

큐타 타이틀에'폭발 속도'를 달고 동경하는 마음에 이번에 써봤습니다.

참조 링크