Bootstrapにダーク・ライトモードがいつの間にか来てたので導入してみた
このブログでは以前からBootstrapを使っているのですが、この前Bootstrapのドキュメントを読んでたらv5.3からカラーモードが追加されていたことに気が付きました（該当のページは↓）。
追加されたのは1年以上前なんですけどね…😂
ということで、土日を使ってパパっとダークモードとライトモードの切り替えや、ユーザーのシステム設定を自動反映させるように変更しました。
- 導入時のTips
bg-bodyやbg-body-tertiaryでページの背景色を設定することでダーク・ライトの切り替え時に自動的に切り替わるよ- 文字についても
text-bodyを設定していれば、背景色の反転と同時に切り替わるよ - 切り替え処理自体にはJSが必要だよ
- png, webpみたいに背景が透過する画像だと、場合によっては文字が背景色に同化しちゃうよ😢