Dark Mode Toggle - ダークモード切り替え用Webコンポーネント
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)です。
Hello Dark Mode GoogleChromeLabs/dark-mode-toggle: A custom element that allows you to easily put a Dark Mode ? toggle or switch on your site: