ダークモード/ライトモードをおしゃれに切り替えるコードスニペット8選【CSS/JavaScript】

ダークモード ライトモード 切り替えトグル

サイトの配色は、読みやすい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

3. 「月と太陽」のトグルボタン

SVG画像とアニメーションを使い、昼と夜の切り替えをユニークに表現しているスニペット。コントラストモードの切り替えをコンセプトに、デザインで遊び心をもたせています。ただし、初見の人が戸惑ってしまう可能性もあるので、文字装飾などを活用して使い勝手を改善してもいいかもしれません。

See the Pen
Light / Dark Mode
by Álex (@lerida)
on CodePen.0

4. CSSで作ったトグルボタン

今回紹介するスニペットにはJavaScriptを使ったものが多いですが、CSSだけでつくられたのがこのボタンです。見た目にこだわるだけでなく、HTMLフォームを活用して使いやすいモード切り替え機能を実装しています。

See the Pen
CSS Theme Switcher
by Michelle Barker (@michellebarker)
on CodePen.0

5. ネオンのトグルボタン

ページモードが変化すると、アイコンが変化するスニペット。ライトモードで描かれているデザインが、ダークモードではネオンカラーに変化します。遊び心が満載なのはもちろん、モードの切り替えをわかりやすく表現できています。

See the Pen
GitHub Dark Mode Toggle
by Chintu Yadav Sara (@chintuyadav)
on CodePen.0

6. シンプルな切り替えボタン

シンプルな切り替え機能が必要なら、このボタンがおすすめです。派手なアイコンや遊び心のあるアニメーションはなく、クリックを通じたCSSによるスムーズなモード切り替えができるだけの、シンプルなボタンです。ただし、ユーザーの好みのモードをローカル環境に保存する、便利なJavaScriptも提供しています。

See the Pen
Persistent Dark Mode
by Brian Haferkamp (@brianhaferkamp)
on CodePen.0

7. Vueのチェックボックス

JavaScriptフレームワークであるVueのコンポーネントを使えば、シンプルなチェックボックスを実装してモード切り替えができます。CSSを使ってアレンジすれば、さらにデザインを洗練させられるはずです。

See the Pen
Basic Vue Reactivity
by CodePen (@codepen)
on CodePen.0

8. 電球型の切り替えボタン

モードの切り替えに一工夫加えたいなら、このスニペットが参考になるでしょう。使いやすさを意識し、電球の画像はHTMLのボタン要素内に配置されています。アニメーションにはCSSを使用しており、ポートフォリオやブログにおすすめです。

See the Pen
Dark Mode
by Airen (@airen)
on CodePen.0

おわりに

Webサイトにモードの切り替え機能を実装すると、ユーザーが自分好みのモードを選べるだけでなく、コンテンツの可読性も高められます。

今回紹介した例からもわかるように、JavaScriptを使わずに、CSSのみでも魅力的な切り替えボタンが実装可能です。ぜひ作品からインスピレーションを得て、オリジナルの切り替えボタンを作ってみてください。

(執筆:Eric Karkovack 翻訳:Asuka Nakajima 編集:齊藤颯人 提供:speckyboy

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
エンジニア副業案件
Workship