この記事は 驚異のFANZA女優検索 Advent Calendar 2021 の 8 日目の記事です。

ダークモード

今日はわりと簡単め。ダークモードを実装した。ダークモードでググった時にかなり簡単そうだったので試しに作ってみた感じ。面白味には欠けるし、何番煎じ感はあるものの試しにやってみるのは悪くないと思ったのでやってみた。一番簡単に実装するなら以下を設定するだけ。これだけで白ベースのhtmlだとダークモードに早変わりという感じ。

body {
  background-color: #000;
  color: #fff;
}

設定している色までは変わらない

ただ実際にはこれだけで済むわけではない。cssを見れば分かると思うが、背景を黒、文字を白にしているだけなので、当たり前の話直接colorやbackground-colorを設定したらその色になる。自分のサービスでも薄くピンク色の背景を付けている所や灰色の背景を付けている所があったが、ダークモードでもそこはそのままの色になっていた。当たり前。問題はそこに違和感がないかだが、モードが切り替わっても同じ色というのは、やはり若干の違和感はあると思う。

で、設定している色をどう扱うか

これに対してもっとも簡単な対応は、違和感がありつつもそれをスルーすることだと思う。ぶっちゃけ画面の半分以上の背景色が黒くなっていればそれでダークモードと言い張ることは出来る。それでも気になるようであれば次に簡単なのは、直接colorやbackground-colorを設定しているところを止めてしまうことだ。恐らく視覚的な効果を狙って何らかの理由で色を付けていると思うが、その色を止めても成り立つのであれば、止めればそれでダークモードの色になる。それでは駄目な場合は、ダークモードにされた場合、色を付けている所は、別の色に変える方法になると思う。今回はサクッと対応したかったので、スルーと色付けを止めるという方法で解決とした。

ダークモードの維持

で、これだけではまだダークモード完成ではなくて、実際にダークモードを作るのであれば、当然ダークモードと通常モードの切り替える方法が必要だ。つまりトグルボタンを作って、cssにdarkとnormalを作っておいてjavascriptで、クリックされたことでそれを反転する仕組みが必要になる。さらにどの画面でも反映するようにするには、現状がどっちのモードなのかをクッキーに保存する必要がある。クッキーがないとダークモードにして画面切り替えをしたらまた通常モードに戻ってしまう。

サーバとクライアントのレンダリング

画面読み込み時の描画に関してはクッキーを見てjavascriptで反映する仕組みをそのまま使うとNG。何故なら一瞬ライトモードで表示した後にjavascriptを解析してダークモードになるため画面がちらつく。サーバーでクッキーの値を見てその値で直接レンダリングする仕組みにしないと駄目だ。この辺は業務でWEBページを作っている人なら常識だと思うが、自分は一連の流れが想像出来ていなかったのではまってしまった。

ダークモードが合うサービス

まあcssとjavascriptが分かっていればダークモードの実装はそれほど難しくない。そして個人的にはFANZA女優とダークモードの愛称は悪くないと思う。夜のFANZA女優。