ダークモード/ライトモードをおしゃれに切り替えるコードスニペット8選【CSS/JavaScript】

7. Vueのチェックボックス

JavaScriptフレームワークであるVueのコンポーネントを使えば、シンプルなチェックボックスを実装してモード切り替えができます。CSSを使ってアレンジすれば、さらにデザインを洗練させられるはずです。

See the Pen

Basic Vue Reactivity by CodePen (@codepen)

on CodePen.0

8. 電球型の切り替えボタン

モードの切り替えに一工夫加えたいなら、このスニペットが参考になるでしょう。使いやすさを意識し、電球の画像はHTMLのボタン要素内に配置されています。アニメーションにはCSSを使用しており、ポートフォリオやブログにおすすめです。

See the Pen

Dark Mode by Airen (@airen)

on CodePen.0

おわりに

Webサイトにモードの切り替え機能を実装すると、ユーザーが自分好みのモードを選べるだけでなく、コンテンツの可読性も高められます。

今回紹介した例からもわかるように、JavaScriptを使わずに、CSSのみでも魅力的な切り替えボタンが実装可能です。ぜひ作品からインスピレーションを得て、オリジナルの切り替えボタンを作ってみてください。

（執筆：Eric Karkovack　翻訳：Asuka Nakajima　編集：齊藤颯人　提供：speckyboy）