ウェブサイトにダークモードを追加した方法

昼と夜の両方の使用に最適にするために、Webサイトの2つのバージョンを作成するためのステップバイステップの説明

Dark mode

更新:メディアクエリレベル5を使用するようになりました:prefers-color-scheme

ザ・Media Queries Level 5仕様新しいが含まれていますprefers-color-schemeメディア機能。

これは現在、すべての主要なブラウザでサポートされています。リリース76以降のChrome / Edge、67以降のFirefox、およびSafari(バージョン12.1以降)。 iOS Safariでさえ、

これを使用して、ユーザーがダークモードとライトモードのどちらでページを閲覧しているかを確認できます。

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

これを使用して、デフォルトでサイトの明るいバージョンを表示し、システムがダークモードの場合は暗いバージョンを表示します。

システムにダークモードが組み込まれていない場合(古いWindows / macOS、Linux)、私の提案は次のような拡張機能を使用することですナイトアイまたは類似。

以前にダークモードを実装した方法prefers-color-scheme利用可能でした

最近、自分のWebサイトを再設計しました。参考までに、外観の2枚の写真を次に示します。

Old homepage

Old post page

私はこのウェブサイトをほぼ1年前にデザインし、他のウェブサイトと同じように、その過程で多くの変更を加えました。

やがて私はデザインが古くなりました。タイトルが大きすぎたり、コンテンツを正しく表示する代わりにスペースが失われすぎたりするなどです。

私は昨日の夜に座ってウェブサイトを再想像し始めました、そして私は今朝再設計を終えました:

New homepage

New post page

ずっといい!最も重要なコンテンツは、より目立つものです。

等幅フォント(Inconsolata)を使用したのは、フォントの使用により読みやすさが低下し、ページサイズが大きくなったにもかかわらず、プログラミングブログとしては優れているためです。欲しいです私のサイトのそのフォント。私はそれがもっと好きで、私のサイトは私の日々の活動の大部分を占めているので、私はそれを私が望むようにしたかったのです。

私はちょうど1つのことを逃しました:ダークモード。再設計の過程で、ダークモードオプションを念頭に置いていました。

どうやってやったの?まず、サイドバーにムーン絵文字🌓を追加しました。これは、モードを明るい色から暗い色に変更できるようにする方法です。

次に、クリックすると実行されるJavaScriptスニペットを追加しました。私はそれをに追加しましたonclickHTMLでインラインのイベントハンドラー。

<p>
  <a href="#" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')" title="Dark/light
</p>

これは、onclickで実行されるJavaScriptです。

localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')

少し複雑ですが、基本的にはmodeのプロパティローカルストレージは「暗い」です(まだ設定されていない場合は、デフォルトで暗いになります。||演算子)、そして私はそれの反対をローカルストレージに設定しました。

次に、を割り当てますdarkクラスへbodyHTML要素。CSSを使用してダークモードでページのスタイルを設定できます。

DOMが読み込まれるとすぐに別のスクリプトが実行され、モードが暗いかどうかがチェックされます。もしそうなら、それは追加しますdarkクラスへbodyHTML要素:

document.addEventListener('DOMContentLoaded', (event) => {
  ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')
})

これで、ユーザーがモードを変更した場合、次にページをロードしたときに選択内容が記憶されます。

次に、CSSに多くのCSS命令を追加しましたが、すべて接頭辞が付いていますbody.dark。これらのように:

body.dark {
  background-color: rgb(30,34,39);
  color: #fff;
}
body.dark code[class*=language-],
body.dark table tbody>tr:nth-child(odd)>td,
body.dark table tbody>tr:nth-child(odd)>th {
  background: #282c34
}

今、物事はすでに機能しているはずです!これがダークモードの私のサイトです:

Dark homepage

Dark post page

追加しましたdarkクラスへbodyデフォルトの要素。ダークモードをデフォルトにするには:

<body class="dark">
  ...
</body>

どうして?まず、私はそれがもっと好きでした。それから、ツイッターで世論調査をしましたが、人々はそれをもっと気に入りました。

Poll

しかし、技術的な理由からも、実際には非常に単純なものです。ユーザー選択をサーバー側に保存しないため、ローカルストレージが利用可能になるまでモードを知る方法がありません。

サイトがサーバー側で生成された場合はそれを行うことができますが、静的サイトであるため、要求するすべての人に常に同じページを提供します。 Cookieを取得したとしても、それを処理する場所がありません(反対に、これはページの読み込みが速くなることを意味します)。

そのため、誰かが私のサイトの別のページに移動したり、2回目の訪問で初めてページを読み込んだりするときに、モードを決定している間は明るいページを表示したくありません。たぶん、訪問者は真夜中に暗い部屋でコーディングしています。

ライトモードでそれを行いたいと思います。暗いページを数ミリ秒間表示してから、もう一度白くします。


その他のラボチュートリアル: