Bear Blog のライト/ダーク モードのステップバイステップ ガイド

私は最近、prefers-color-scheme メディア機能と light-dark() color 関数を組み合わせて、Bear ブログにライト/ダーク モードの切り替えを実装しました。

これが私がやった方法です。

ステップ 1: CSS のセットアップ

CSS は、light-dark() color 関数など、過去数年間でいくつかの優れた新機能を追加しました。この関数を使用すると、任意の要素に 2 つの色 (ライト モード用とダーク モード用) を指定できます。

たとえば、ライト モードでは背景を白、ダーク モードでは黒にしたい場合は、次のように設定します。

body {
  background-color: light-dark(#fff, #000);
}

このアプローチを、明るいモードと暗いモードで異なる色のニーズを持つすべての要素に適用しました。

ステップ 2: HTML を追加する

テーマの切り替えには、スイッチ、ラジオ ボタン、ドロップダウン メニューではなく、単一のアイコンを使用しました。ページは、反対のモードに切り替えるためのアイコンのみが表示された状態で読み込まれます。デフォルトのテーマがダークであるため、ダークモードのアイコンは最初は非表示で、ライトモードに切り替えるアイコンが表示されます。

onclick イベントは switchMode() 関数を呼び出します。この関数は、明るいテーマと暗いテーマの切り替えを処理します (詳細は後ほど)。 HTML の設定は次のとおりです:

<a id="preferdark" onclick="switchMode('dark')" style="display: none;">
  <!-- Icon for switching to dark mode. -->
</a>
<a id="preferlight" onclick="switchMode('light')">
  <!-- Icon for switching to light mode. -->
</a>

ステップ 3: JavaScript の作成

JavaScript は 2 つの主要なタスクを処理します:

1. ユーザーがアイコンをクリックすると、ライト モードとダーク モードが切り替わります。
2. ユーザーのテーマ設定を localStorage に保存し、今後のアクセス時に自動的にロードします。

JavaScript は 2 つの部分に分割されています。 のコードです。ページの読み込み時にテーマを設定し、

にコードを追加します。ページが完全に読み込まれた後に要素を更新します。

にコードを追加するには<フッター> Bear で、設定 > に移動します。ヘッダーとフッターのディレクティブ.

JavaScript コード

このコードは、以前に保存したテーマをローカル ストレージから取得します (利用可能な場合)。それ以外の場合は、ユーザーのブラウザまたは OS が明るいテーマを好むか暗いテーマを好むかを確認します。その情報が利用できない場合は、デフォルトでダーク モードが使用されます。次に、そのモードを :root 要素 (つまり、基本要素) に適用します。

const storedScheme = localStorage.getItem("color-scheme");
const preferredScheme = storedScheme 
  ? storedScheme 
  : window && 
    window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";

document.querySelector(':root').style.setProperty("color-scheme", preferredScheme);

JavaScript コード

このコードは、 で以前に設定されたpreferredScheme変数に基づいて正しいアイコンを表示します。 switchMode() 関数は、アイコン表示を更新し、:root カラースキームを変更し、新しい設定をローカル ストレージに保存します:

document.querySelector("#preferlight").style.display = preferredScheme === "light" 
  ? "none" 
  : "";
document.querySelector("#preferdark").style.display = preferredScheme === "light" 
  ? "" 
  : "none";

function switchMode(mode) {
  document.getElementById("preferlight").style.display = mode === "light" 
  ? "none" 
  : "";
  document.getElementById("preferdark").style.display = mode === "light" 
  ? "" 
  : "none";
  document.querySelector(':root').style.setProperty("color-scheme", mode);
  localStorage.setItem("color-scheme", mode);
}

これで、Bear ブログのライト/ダーク モードの切り替えが完了です!

以上がBear Blog のライト/ダーク モードのステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。