3. 「月と太陽」のトグルボタン

SVG画像とアニメーションを使い、昼と夜の切り替えをユニークに表現しているスニペット。コントラストモードの切り替えをコンセプトに、デザインで遊び心をもたせています。ただし、初見の人が戸惑ってしまう可能性もあるので、文字装飾などを活用して使い勝手を改善してもいいかもしれません。

See the Pen

Light / Dark Mode
by Álex (@lerida)

on CodePen.0

(広告の後にも続きます)

4. CSSで作ったトグルボタン

今回紹介するスニペットにはJavaScriptを使ったものが多いですが、CSSだけでつくられたのがこのボタンです。見た目にこだわるだけでなく、HTMLフォームを活用して使いやすいモード切り替え機能を実装しています。

See the Pen

CSS Theme Switcher
by Michelle Barker (@michellebarker)

on CodePen.0