Darkmode.js

『Darkmode.js』でダークモード入れてみました。

Sample

See the Pen vYKgEVE by sarap422 (@sarap422) on CodePen.

※追記１（2020-10-29）

＜body＞ {background:} が反映されなくてなんでだろうと思ったけど、
＜body＞の上に＜div.dark-background＞がかぶさってくるみたいなので、
色指定等は「wrapper」等で指定した方がいいかもしれないですね。

head

<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- darkmode-js CSS -->
<link rel="stylesheet" href="js/darkmode-js/darkmode-js.css">
</head>

/body

<!-- 疑似要素 -->
<span class="gluttony-Sword-bs badge"><i></i></span>
<!-- jquery + Bootstrap CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<!-- darkmode-js + function（CDN + option設定） -->
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script src="js/darkmode-js/darkmode-js-function.js"></script>
</body>

darkmode-js-function.js

// option設定
var options = {
// 左端に置く
bottom: '-17px', // default: '32px'
right: 'unset', // default: '32px'
left: '-17px', // default: 'unset'

darkmode-js.css

.gluttony-Sword-bs i:after {
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 90%;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.4rem;
  content: "Light";
  color: #212529;
  background: #ffc83d;
}

.darkmode--activated .gluttony-Sword-bs i:after {
  font-weight: normal;
  content: "Dark";
  color: #fff;
  background: #757575;
}

要するに「jQuary」「Bootstrap」「darkmode-js」本体はCDN読み込み、
『darkmode-js-function.js』は、デフォルトだと右下で邪魔だったので
option設定で左下に動かして＜script＞＜/script＞は別で読み込み、

そのままだと意味不明なので、疑似要素で「Light」「Dark」書きましたみたいな
お手軽ダークモードです。

『Bootstrap Icons』さんや『Bootstrap Toggle』さんというのも
CDNで使えるみたいですので、そちらを使えばもう少し見栄えよくなるかもですね。

Bootstrap Icons
https://icons.getbootstrap.com/icons/toggle-on/
Bootstrap Switch Button
https://gitbrent.github.io/bootstrap4-toggle/

参考

Darkmode.Jsを使う - Webクリエイターボックス
https://www.webcreatorbox.com/tech/dark-mode

「prefers-color-scheme」ではないので、
スマホのユーザー設定は反映されなさそうですけど、

「prefers-color-scheme」絡めると今度はページ読み込みのたびに、
『Darkmode.Js』がリセットされそうで、結構大変そうだったので今回はやめました。

CSSのfilterプロパティとJavaScriptで手軽にダークモードに切り替える | Free Style
https://blanche-toile.com/web/css-filter-darkmode

メディアクエリ

@media (prefers-color-scheme: dark) {
:root 
 --dark-setting: darkmode--activated;
}

みたいにしたらいけそうな気もするのですけど、
たぶんこれからは、SCSSの$変数をメインで使いそうな気がしますので
とりあえずはこんな感じなのでした。

『Darkmode.js』『Bootstrap』でお手軽ダークモード