◆◆◆

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

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

ダークモードの切り替えができることに気づく
wordpressでcocoonのテーマをダークモードのボタンが出るように変更
ついでに見づらい色だったモバイルのメニュー表示をいじる

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

自分のメモとして作っているこのサイトは、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>

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

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

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

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

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

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

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

https://dateqa.com/cocoon/#silk

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

define('SILK_SWITCH', true);

追加した箇所は最初のほう。９行目にdefine('SILK_SWITCH',true)って入れといて、「ファイルを更新」のボタンを押す。

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

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

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

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

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

残念なことが１つあって、cocoonの更新したらこの設定上書きされてしまうので、また書かないとけない。

ついでに見づらい色だったモバイルのメニュー表示をいじる

iphoneとandroidタブレットで表示させてるメニュー表示。
メニューそのものは白表示なんだけど、最初はメニュー本体の文字が黒になってて読みづらかった。

色とか位置とかカスタマイズするためのキーワードがよくわからなかったのを、探してみたら解説してくれている方がおられた。

作者さんありがとう。

【Cocoon】ヘッダーモバイルボタン（スマホメニュー）をカスタマイズ

Cocoonのいいところ。それは「とても便利」なところ。他のテーマは使ったことがないので分かりませんが、Cocoonは今まで「やりたいけどできない」ことは殆どありませんでした。たとえば、これです。スマホのメニューが出てきたり、隠れたりす

rgbaの変換の方法

rgba指定の変換をする必要があって、#ffffffとかを変換してくれるページがある。
作者さんありがとう。

RGBとカラーコードの変換ツール : 数値が何色か調べることもできます

WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツール。数値から何色になるか調べることもできます。16進数カラーコードとRGBを変換する計算式の解説も。

結論

クリックするとメニューが出てくる文字を白にし、ついでに背景を半透明表示にしてみた。

wordpressの設定箇所

wordpressの「外観」->「カスタマイズ」に「追加CSS」ってのがある。

ここに追記すると、その場で見た目がプレビューできる。書き終わったら「公開」のボタン押して反映する。

rgba指定で半透明にする方法

以下の内容を書くんだけど、ページヘッダの背景色指定が「#3847ea」を使ってて寄せていきたいので、rgba指定に変換して「56,71,234」を書く。このrgba指定の4つ目のパラメータに0.xって書くと半透明になる。

その後、コード表記の箇所で等幅フォント使いたくなった。
codeって箇所も追記した。

.navi-menu-content{
    color: #FFF ;
    background-color: rgba(56,71,234,0.5);
}
.menu-drawer a{
    color: #fff;/*文字の色*/
    background-color: rgba(56,71,234,0.1);
}
code {
    font-family: "CourierNew", "Consolas", "Courier", monospace;
}

navi-menu-contentとmenu-drawerってキーワードを探すのにちょっと時間かかった。