Astro ダークモード切り替え機能を追加
公開日/ 更新日
Astroで作成している個人サイトにダークモード切り替え機能を追加した。ダークモード切り替え機能を導入する
Tailwind CSSの導入は自分の知識不足を鑑みて、また、長期的に個人サイトを運営することも考えて、今回は見送ることにする。
そのため標準のCSSを使ってダークモード切り替え機能を作成する。
今回編集や作成をしたファイルは以下の通り。
src/components/BaseHead.astro
src/components/Header.astro
src/components/ThemeToggle.astro
src/styles/global.css
src/layouts/Base.astro