眩しいページ、まぢむり

このブログはAstroのテンプレートでサクッと作ったものなのですが、気に入らない所が1つありました。

それは…

ダークテーマがない！！

非常によくない。許せません。

夜中に閲覧すると目が死ぬのは確定なので、ダークモードを追加してあげました。

ヘッダーの右側にボタンがあって、ポチっと押すとテーマが切り替わります。すごいでしょ。

ライトテーマは適当

白けりゃいいので超適当。おわり！

ダークテーマを作成

真っ黒だとあれなので、丁寧に作ります。

色決め

MDNの色を参考にしました。ダークモードでの背景色は#1b1b1b。 コードブロックとか、リンクの色は適当です。気に入らなかったら勝手に変えます…

切り替えるためのボタンとテーマごとの色

ボタンはAstroのドキュメントを参考にしました。

ボタン用のAstroファイルを作って、ヘッダーのAstroファイルにぶちこむだけ。

ボタンに関してはこれでおわり。超シンプル。

さて、CSS側についてですが、本当に分からないもんで…

ライトテーマではちゃんと表示されるのにダークテーマでは変になったり、その逆が起こったり…苦戦してしまいました。 もっとお勉強しなくては…

おわり！