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> 右上に表示されているのがダークモードの切り替えコンポ