Darkmode.js 사용 방법
공식 문서에 따라 소개를 진행하겠습니다 때문에 아래 링크를 참조하면서 봐주세요!
Darkmode.js URL : htps : // 다 rk도 js.ぇ아 rn. 우노 /
아래 순서로 설명합니다.
그럼 빨리 가자! !
Darkmode.js란?
Darkmode.js는 쉽게 "다크 모드"를 구현할 수있는 JavaScript 라이브러리입니다. 최근 Twitter나 Instagram에 한하지 않고, 현대적인 어플리케이션에는 거의 확실하게 실장되고 있는 다크 모드.
눈에 강한 빛이 보내지지 않기 때문에, 심야대에 스마트폰 화면을 보고 있어도 수면에 지장이 나오기 어려워 좋네요.
"어플리케이션을 만들었는데 좋지만, 다크 모드 넣고 싶다. 하지만 어려울 것 같아..."
그렇게 말한 분이라도 간단하게 실장할 수 있는 내용이 되고 있으므로, 안심해 주세요!
구현 방법
그럼 조속히 실장해 갑시다.
우선 간단한 HTML 파일을 만드세요.
index.html<!doctype html>
<html class="no-js" lang="jp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="darkmode.js"></script>
</head>
<body>
<h1>Hello world!</h2>
<button>BUTTUN</button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
</body>
</html>
css와 js 파일을 읽은 간단한 만들기로하고 있습니다.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
이 코드를 body 태그의 끝에 기술하는 것으로 Darkmode.js를 호출하고 있습니다.
그런 다음 JavaScript 파일을 살펴 보겠습니다.
darkmode.jsfunction addDarkmodeWidget() {
new Darkmode().showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
이것만으로 다크 모드의 구현은 완료입니다. (css 파일은 생략합니다.)
아래와 같은 화면이 될 것입니다.
오른쪽 하단에 검은 색 원이 나타났습니다. 시도를 클릭해 봅시다.
그러면...
화면이 어두워지고 검은 글꼴이었던 「Hello world!」가 흰색으로 되어 있습니다!
버튼의 색을 봐 주시면 알 수 있습니다만, 구조로서는 색을 반전하고 있는 것만으로 꽤 심플하네요.
이것은 어두운 모드입니다! 라이트 모드로 되돌리고 싶을 때는 오른쪽 하단의 흰색 원표를 클릭하면 돌아옵니다! !
음, 이런 느낌으로 쉽게 구현할 수 버렸습니다.
옵션 해설
Darkmode.js는 옵션도 제공합니다.
그들을 소개합니다.
darkmode.jsconst options = {
/*①*/ bottom: '64px', // default: '32px'
/*②*/ right: 'unset', // default: '32px'
/*③*/ left: '32px', // default: 'unset'
/*④*/ time: '1s', // 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();
차례로 해설해 갑니다.
①아래에서 몇 px 떨어지는지를 지정하고 있습니다. px수를 올릴수록 위의 위치에 고정됩니다.
② 오른쪽에서 몇 px 떨어져 있는지 지정할 수 있습니다. 이번 코드라면 「unset」이 되어 있으므로 특히 기능은 하고 있지 않습니다.
③ 왼쪽에서 몇 px 떨어져 있는지 지정할 수 있습니다. 이번 경우라면 왼쪽 하단에 다크 모드의 원표가 표시되게 되네요.
④ 모드 전환 시간을 지정할 수 있습니다.
⑤ 다크 모드의 색에 배합하는 색을 선택할 수 있습니다.
⑥ 라이트 모드의 색상을 지정할 수 있습니다.
⑦⑧ 모드 전환의 원표의 색을 바꿀 수 있습니다.
끝에
어땠습니까? 여러분도 꼭 다크 모드를 실시해 보다 리치한 어플리케이션을 만들어 봅시다! !
덧붙여서 다크 모드는 단순히 색의 반전을 이용해 실장되고 있으므로, 안에는 반전해 원하지 않는 요소도 나온다고 생각합니다. 그 때의 해결 방법도 이쪽에 기술해 둡니다.
이번의 경우는 버튼 요소에 반전하고 싶지 않기 때문에 그것을 예에 대응해 갑니다.
<button class="darkmode-ignore">BUTTUN</button>
이와 같이 대상의 요소에 클래스에서 「darkmode-ignore」라고 설정해 주는 것만으로 OK입니다! !
Reference
이 문제에 관하여(Darkmode.js 사용 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kotobuki562/items/9693426b8af72a718fee
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
그럼 조속히 실장해 갑시다.
우선 간단한 HTML 파일을 만드세요.
index.html
<!doctype html>
<html class="no-js" lang="jp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="darkmode.js"></script>
</head>
<body>
<h1>Hello world!</h2>
<button>BUTTUN</button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
</body>
</html>
css와 js 파일을 읽은 간단한 만들기로하고 있습니다.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
이 코드를 body 태그의 끝에 기술하는 것으로 Darkmode.js를 호출하고 있습니다.
그런 다음 JavaScript 파일을 살펴 보겠습니다.
darkmode.js
function addDarkmodeWidget() {
new Darkmode().showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
이것만으로 다크 모드의 구현은 완료입니다. (css 파일은 생략합니다.)
아래와 같은 화면이 될 것입니다.
오른쪽 하단에 검은 색 원이 나타났습니다. 시도를 클릭해 봅시다.
그러면...
화면이 어두워지고 검은 글꼴이었던 「Hello world!」가 흰색으로 되어 있습니다!
버튼의 색을 봐 주시면 알 수 있습니다만, 구조로서는 색을 반전하고 있는 것만으로 꽤 심플하네요.
이것은 어두운 모드입니다! 라이트 모드로 되돌리고 싶을 때는 오른쪽 하단의 흰색 원표를 클릭하면 돌아옵니다! !
음, 이런 느낌으로 쉽게 구현할 수 버렸습니다.
옵션 해설
Darkmode.js는 옵션도 제공합니다.
그들을 소개합니다.
darkmode.jsconst options = {
/*①*/ bottom: '64px', // default: '32px'
/*②*/ right: 'unset', // default: '32px'
/*③*/ left: '32px', // default: 'unset'
/*④*/ time: '1s', // 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();
차례로 해설해 갑니다.
①아래에서 몇 px 떨어지는지를 지정하고 있습니다. px수를 올릴수록 위의 위치에 고정됩니다.
② 오른쪽에서 몇 px 떨어져 있는지 지정할 수 있습니다. 이번 코드라면 「unset」이 되어 있으므로 특히 기능은 하고 있지 않습니다.
③ 왼쪽에서 몇 px 떨어져 있는지 지정할 수 있습니다. 이번 경우라면 왼쪽 하단에 다크 모드의 원표가 표시되게 되네요.
④ 모드 전환 시간을 지정할 수 있습니다.
⑤ 다크 모드의 색에 배합하는 색을 선택할 수 있습니다.
⑥ 라이트 모드의 색상을 지정할 수 있습니다.
⑦⑧ 모드 전환의 원표의 색을 바꿀 수 있습니다.
끝에
어땠습니까? 여러분도 꼭 다크 모드를 실시해 보다 리치한 어플리케이션을 만들어 봅시다! !
덧붙여서 다크 모드는 단순히 색의 반전을 이용해 실장되고 있으므로, 안에는 반전해 원하지 않는 요소도 나온다고 생각합니다. 그 때의 해결 방법도 이쪽에 기술해 둡니다.
이번의 경우는 버튼 요소에 반전하고 싶지 않기 때문에 그것을 예에 대응해 갑니다.
<button class="darkmode-ignore">BUTTUN</button>
이와 같이 대상의 요소에 클래스에서 「darkmode-ignore」라고 설정해 주는 것만으로 OK입니다! !
Reference
이 문제에 관하여(Darkmode.js 사용 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kotobuki562/items/9693426b8af72a718fee
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const options = {
/*①*/ bottom: '64px', // default: '32px'
/*②*/ right: 'unset', // default: '32px'
/*③*/ left: '32px', // default: 'unset'
/*④*/ time: '1s', // 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();
어땠습니까? 여러분도 꼭 다크 모드를 실시해 보다 리치한 어플리케이션을 만들어 봅시다! !
덧붙여서 다크 모드는 단순히 색의 반전을 이용해 실장되고 있으므로, 안에는 반전해 원하지 않는 요소도 나온다고 생각합니다. 그 때의 해결 방법도 이쪽에 기술해 둡니다.
이번의 경우는 버튼 요소에 반전하고 싶지 않기 때문에 그것을 예에 대응해 갑니다.
<button class="darkmode-ignore">BUTTUN</button>
이와 같이 대상의 요소에 클래스에서 「darkmode-ignore」라고 설정해 주는 것만으로 OK입니다! !
Reference
이 문제에 관하여(Darkmode.js 사용 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kotobuki562/items/9693426b8af72a718fee텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
