ダークモード使いたい

◆◆◆

普段使うアプリケーションはa5sqlとかvscodeはダークモードあるけど、beckyやcyberduckにはない(そのうちできるんやろけど)。

webページ見てると、白い背景のページは目が痛くなってくる。
背景が黒のほうが嬉しい。

ダークモードの切り替えができることに気づく

自分のメモとして作っているこのサイトは、cocoonから選べるダークテーマを使ってた。
作者さんありがとう。

Cocoonスキン『ダークスキン』の特徴
このページは「ダークスキン」について書いているので、サイドバーの「スキン切り替え」から「ダークエンジ」、「ダークルリ」、「ダークカモノハ」を選択してください。このサイトのヘッダーはグラデーションされていますが、スキンを適用してもグラデーショ

django導入で静的サイトを作ってみたくて、とても苦手なcssを自分でいじりはじめたとき、ダークテーマとそうでないテーマを切り替えてくれるjavascriptがあることに気づいた。

作者さんありがとう。

Webサイトをダークモードに対応させよう
ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも
「Darkmode.js」Webサイトを手軽にダークモード表示に - 株式会社ネディア │ネットワークの明日を創る。
Webサイトを手軽にダークモード表示にすることができるスクリプト「Darkmode.js」というものがあるそうですので、弊社のWebサイトも対応させてみたいと思います。 目次1 Darkmode.js公式サイト2 使い方

django導入の過程で、templateフォルダに置いたhtmlの最初のほう(titleってあるあたりの次ぐらい)にこう書く。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js">
</script>

さらにimg srcのちょっと下あたりにこう書く。

<script>
    new Darkmode().showWidget();
</script>

すると画面右下に黒いマルが表示されるようになって、ポチポチ押してみると背景が切り替わる。

gvis-dark
gvis-dark

なるほど、iphoneとかandroidタブレットで開いてもちゃんと表示される。

このhtmlはヘッダ部分で、djangoのtemplateの中では読み込みファイルのなんだけど、body部分にも適用してくれる。いったいどうなってんだろう。html苦手なので理由がさっぱりわからん。

次に、これを自分のメモサイトでも使えないか探してみた。

wordpressでcocoonのテーマをダークモードのボタンが出るように変更

黒基調で作られたテーマ使ってたのを、さっきの黒いマルをポチポチした操作で切り替え可能なテーマというのが存在するらしい。下のほうにある「ダークルリ」を「SILK」に変更してみた。

gvis-dark

このテーマはダークモード切り替えに対応したスキンらしい。
作者さんありがとう。

【Cocoonスキン】SILK(シルク)の使い方とカスタマイズ方法
SILK(シルク)はろこが作成した、WordPress無料テーマ「Cocoon」のデザインスキンです。SILKの使い方やおすすめのカスタマイズ方法、Cocoonスキンの作り方などを初心者にも分かりやすく解説します。

wordpress画面の「外観」にあるfunction.phpに1行追記するとできるらしい。

define('SILK_SWITCH', true);

追加した箇所は最初のほう。9行目に入れといて、「ファイルを更新」のボタンを押す。

gvis-dark

ここで通常表示すると、画面左下にハーフムーンみたいなアイコンが浮かんでくる。

gvis-dark

ハーフムーンクリックすると、ダークテーマに切り替わった!!!

gvis-dark

もちろんiphoneとandroidタブレットでも同じことができた。

昼日中に外でタバコ休憩しながら推敲するときは普通に表示させて、寝る前の暗い部屋でふと思い出したときはダークモードに切り替えができる。

検索してたら、バージョン新しめでないとダークモードにならないんだって。最新にしといてよかった。

コメント