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