ダークモード実装

本当は題名を「ワードプレスにプラグインをインストールするよりも素早くダークモードを実装する方法」としたかったのですが、長過ぎるため却下しました。書こうと思ったきっかけは、久々に夜な夜な作業になってしまいTouch IDよりも先にバックライト付けてくれないかと思っていたところ、特に撮影現場などで画面を暗くする必要があるノート型と違い、大きな画面が十分キートップを照らしていたのですが、逆に夜間作業の調べ物などで白地の画面を見ると目が辛くなると言うことがあります。

具体的には、ワードプレス管理画面の外観→カスタマイズ→追加CSSと進み以下を追加します。背景色は各自任意で指定してください。

add dark mode quickly.

参照: ワードプレスにダークモードを実装【最低限の労力で…】 – WASAblog
こちらの記事にもあるように、最終的にはアニメーション変化を付けたりする場合、BODYクラス付随処理が必要になるかと思います。また利用者が設定できるようにする場合はトグルスイッチの実装とIndexedDB(最近だとFirestore)保管を検討します。

視覚設計については可能な限りシンプルにカラーネームで考えるようにして、対比という点でLightGrayの反対はDarkGrayではなくDimGrayになるのが注意点かと思います。参照: HTML Color Shades

最後に冗談ですが、

更新11.4: 機能拡張にしようと思ったら既に公開されていたのでブックマークレットのままで据え置き

投稿者: hkitago

個人事業主の iOS, Android, ウェブアプリ開発者で一児の父親。JavaScript, ActionScript, AppleScript, PHP, SQL, ObjC, Swift, Java の読書実行試験運用管理を生業とし(Golang学習中)、Bind, Postfix, Apache を MacOS で使い、エディタは Vim, mi, Kod, Smultron, TextWrangler を経て Coda, Xcode, Android Studio, Atom といった IDE と CotEditor を重用しています。座右の銘は「アウトプットは量多い方がいい。フィルタは各自がやればいい」です