macOSから始まったダークモードは一気に広がっています。デスクトップはもちろん、Webサイトにおいてもダークモードの需要が高まっています。しかし、単純に暗いCSSを用意すれば良いだけではありません。
ユーザにとって使いやすいダークモードを提供するために使ってみたいのがDark Mode Toggleです。Googleが作成したダークモード用のカスタムエレメントです。
Dark Mode Toggleの使い方
HTMLへの記述は次のようになります。
<dark -mode-toggle
id="dark-mode-toggle-1"
legend="Theme Switcher"
appearance="switch"
dark="Dark"
light="Light"
remember="Remember this"
></dark>
右上に表示されているのがダークモードの切り替えコンポーネントです。
ライトモードへの切り替えも簡単です。
Dark Mode Toggleは表示状態を記録しておくことで次回表示した際にもテーマを維持してくれます。このコンポーネントをモーダルなどで表示してあげればユーザはすぐにテーマを変更できます。
Dark Mode ToggleはJavaScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。
MOONGIFTの関連記事