ブログにダークモードとライトモードを切り替えるボタンを付けました【UI向上】

どうも、本業エンジニアです。ブログに付きがちなボタンと言えば「スクロールトップ」「ライト/ダーク切り替え」とかですよね、このブログにはもともとスクロールトップボタンが付いているので、今回はライト/ダークモードの切り替えボタンを実装してみました。

そういえばもともとダーク基調だった

このブログは背景画像に図書館、色合いは黒に白文字なので、ベースがダークモードになっています。なので、ライトモードを実装すればオッケーということになります。

ライトモードの配色について

鉄板ではありますが、背景が白基調、文字を黒基調でいこうと思います。あとは左下あたりに切り替えボタンを実装すればOKですね。

切り替えボタンを押すと、ダークモード用のスタイルクラスとライトモード用のスタイルクラスを切り替えるイメージとしました。

ちなみに今回は一切自分でコーディングはしません。Claude Codeにお願いするかアンチグラビティにお願いするかですが、今回はアンチグラビティにしました。コードを自分でいじる気がないなら別にこっちでいいはずや、エディタすら開くつもりはないんや。

ボタンのイメージ

ボタンはスクロールトップボタンと同じ高さで同じ大きさにします。また、スクロールトップが右側にあるので、今回の切り替えボタンは左側に配置することにします。

また、ダークモードへの切り替えは「月」のアイコン、ライトモードへの切り替えは「太陽」のアイコンにします。

完成形

完成形はこんな感じになりました。↓

ちょっとアイコンが予定と違いますが、まあいいでしょう。

そしてこれを押すとこのようになります。

いい感じにビカビカしてますね！

最後に

今回はいい感じでダークモードとネオンモードを切り替えるボタンが作成できました。地味にネオンモードだと背景画像が歓楽街っぽくなるという小ネタも仕込んでいます。図書館っぽいイメージと歓楽街っぽいイメージを変えることができるのはユーザビリティ的にはマジでクソみたいな感じかと思いますが、まあ個人的には満足しています。点滅もするし。

自分でコーディングするとだいぶ面倒くさい実装だと思いますが、アイデアだけ投げてそれっぽくしてくるれるのはAIのすごいところですね。バックエンドを全幅の信頼でお願いするのは難しいですが、レイアウトなど見た目の部分に関してはかなり使いやすくなりましたね。

このあたりは職場でも生かせないかなあ。デフォルトのcss整えるとかならAIでも充分にできる気がしてます。業務システムとかだとそこまでリッチでなくてもいいしね。


【送料無料】UIデザインのアイデア帳 アプリ・Web制作の現場で使える基本+実践ノウハウ83／東影勇太／和田直樹

ショップ: bookfan 2号店 楽天市場店

¥2,640

※価格やショップ情報は楽天のものです

楽天で見る

Amazonで探す