DarkReaderを自分のサイトに使う (Windows)

動機

画面を暗くしたい

昨今はスマホやパソコンへの批判としてブルーライトの有害さがあげられます。もちろん、ずっと画面をみてるから疲れるのでしょうが、どうもブルーライトの要するに白色の光が、脳を覚醒させる作用があり、それで自律神経が乱れるのではないかといわれ、たしかに単なる目の疲れでは説明できない気もします。

美しい DarkReader

僕はいつも DarkReader というブラウザの拡張機能を使っており、Chorme を筆頭に Edge でも FireFox でも使えて、結局みんな使ってるみたいなので、僕もつかわせて頂いてますw

たんに画面を暗くするだけなら、画面の色を反転すれば良いのですが、勿論それでも良いですしブラウザの外ではよく使いますが、なんせ DarkReaderのデザインが美しすぎます。(笑)

ダークテーマの CSS を書くのは大変だと、我らが Cocoon の作者のわいひらさん も、有志の方がダークスキンを提供してくださったときにおっしゃってます。このサイトもその方のダークスキンです。ありがとうございます。😍

Cocoon初のダークスキン！「ダークエンジ」含む暗色スキン3種追加
Cocoon初の暗色系スキンの紹介です。黒背景のサイトを作成したい場合は、まず試してみてください。
wp-cocoon.com

要するにダークテーマは大変で、それがDarkReaderとしてあるので、これを活用しない奴はいませんw

流れ

  • ファイルのダウンロード
  • 有効化するため、ちょっとコードを追加

Windowsですが

本ブログはWidnowsのための解説ですが、ファイルのインストール以外は同じでしょう。

ダウンロード

まずはダウンロードですね。npmでやります。npmとはJavascriptのパッケージ管理のソフトで、色々できるみたいですが、今回はインストールするだけなんで大丈夫です。僕はよくわかりませんw

以下の記事を参考に進めます。

darkreader
Dark mode for every website. Latest version: 4.9.58, last published: 7 months ago. Start using darkreader in your project by running `npm i darkreader`. There a...
www.npmjs.com

NPMのインストール

↓ご参考に↓

npmでパッケージをインストールして使ってみる | パソコン工房 NEXMAG
Node.jsをインストールすると一緒にインストールされるものに「npm（Node Package Manager）」があります。 今回はnpmでパッケージをインストールして実際に使用した内容を紹介します。
www.pc-koubou.jp

DarkReaderのインストール

適当な場所にディレクトリをつくり、以下のコマンドを実行します。

npm init
npm install darkreader

多分

node_modules/darkreader/darkreader.js

ぐらいの場所にあるので、好きなところにコピーします。

DarkReaderを適用

いよいよ適用します。ドキュメントをみると色々ありそうですが、今回は最低限やります。

コードを追加

早速コードを書きます。以下をダークテーマにしたいファイルに書きます。<darkreaderのパス>は書き換えください。

<script src="<darkreaderのパス>"></script>
<script defer>
(async function(){
DarkReader.disable();
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});

})();
</script>

 

 

おわりに

多分いけたでしょう！お疲れさまでした。🤩

コメント

タイトルとURLをコピーしました