ダークモード実装しました

LINEで送る
Pocket

オンライン文章校正支援サービス「PRUV」が流行に乗って(正確には乗り遅れて)ダークモードに対応しました。黒字に白文字の画面表示モードです。

「ダークモード用のスタイルシートを作ればいいんだろう」と気楽に始めたプロジェクトでしたが、かなり面倒な作業になってしまいました。「黒字に白文字」といってもそれだけでは済まず、各部の色を微調整する必要があります。黒っぽいアイコンは見えなくなってしまうので、白バージョンを用意してモードによってアイコンを切り替える機構を追加。

CSSファイルも単純に2倍になります。PRUVの場合、レイアウト変更用もあるのでCSSファイルが18個になってしまいました。これに関しては、SCSSファイルを編集すればVisual Studio Codeが各CSSファイルを自動生成してくれるので意外に負担ではなかったりします。

画面モードについてはセキュリティ的な懸念がないため、「運用しながら直す」の方針でリリースしてしまいました。レイアウトが崩れる、CSSが当たっているようには見えない、表示が見づらいなど問題がありましたらお知らせください。

なお、画面表示モードの変更機能はPRUV Business用となります。