サイトの配色は、読みやすいWebサイトをつくるうえで非常に重要です。たとえば、視覚に障がいをもつユーザーのなかには、通常のライトモードではなくダークモードのほうが読みやすいと感じる人もいるでしょう。
また、最近はユーザーのシステム環境も考慮されています。ユーザーのOSがダークモードなのか、ライトモードなのかを検知し、適切なスタイルを提供するWebサイトも登場しました。
しかし、ユーザーに特定のモードだけを強制するのはリスキーです。今回は、ダークモードとライトモードをオシャレに切り替えられる、8つのユニークなCSSとJavaScriptのコードスニペットを紹介します。
（本記事で紹介するコードスニペットは、すべてCodepenに掲載されいるものです）
1. 3種類の切り替えボタン
このスニペットの特徴は、3つのカラーモードと美しいデザインです。各モードの移行はスムーズで違和感なく変更できます。メニューにはトグルスイッチのようなスタイルのHTMLラジオボタンを使用しています。シンプルですが、おしゃれで使いやすいボタンですね。
See the Pen
Light / Dark / Black Theme by Håvard Brynjulfsen (@havardob)
on CodePen.0
（広告の後にも続きます）
2. SASSを使ったトグルボタン
SASSとは、CSSの拡張言語の一つです。CSSにはない動作を実現できることが特徴で、今回はそのSASSを使って作成したトグルボタンをご紹介します。シンプルなボタンにJavaScriptを使い、ページのHTMLタグにdata-theme属性を追加。SASSがその属性の値を探し、それに応じてコンテンツを装飾します。
See the Pen
Easy Dark Mode with SASS by Kaio Almeida (@KaioRocha)
on CodePen.0
