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: