Edge でレンダリング ツールを使用して任意の Web サイトでダーク モードを強制する方法

Windows 11 には、任意のアプリケーションでダーク モードまたはライト モードを使用するオプションがあります。 Microsoft には、Edge のレンダリング ツールと呼ばれる同様のツールがあります。レンダリング ツールは、「レンダリングされたページでダークまたはライト スキームをエミュレート」できるため、Web サイトがどのように見えるかを確認できます

そのため、Dark Reader などの Edge 拡張機能を使用せずにダーク モードまたはライト モードを有効にするオプションが必要な場合は、代わりに Edge のレンダリング ツールを使用できます。

Edge のレンダリング ツールは、Web 開発者がさまざまな表示オプションで Web ページがどのように見えるかを確認するため、または色覚異常などの視覚障害のある人のために使用することを意図した Web 開発ツールであることに注意することが重要です。

ブラウザーの開発者ツールはテスト専用であるため、このツールで行った変更を保存することはできません。コードのみを変更して保存することができます。

デベロッパー ツールを有効にする

Chrome の [レンダリング] タブと同様に、Edge の [レンダリング] ツールを使用して、さまざまな色のオプションで Web サイトがどのように表示されるかを確認できます。

Microsoft のブラウザー ツール担当プリンシパル プログラム マネージャーである Chris Heilmann は、ダーク モードが利用できない Web サイトでダーク モードを強制する方法について、いくつかの役立つアドバイスを提供しました。

この機能を有効にして使用するには、Edge DevTools を開く必要があります。 DevTools を開くには 4 つの方法があります:

1. マウスを使用して Web サイトを右クリックし、[検査] を左クリックします。 .このオプションは、実際には開発者ツール (DevTools) の下の [要素] タブに移動しますが、そこからいつでも [レンダリング] タブをクリックできます。

2. 開いている Edge ウィンドウの右上にある 3 つのドットの Edge 設定に移動します。 [その他のツール]> [デベロッパー ツール] をクリックします .

3. Ctrl + Shift + I を使用します キーボード ショートカット。
4. F12 を押します キーボードで。このキーボード ショートカットは、後で Edge 設定でいつでもオフにできます。

Edge のレンダリング ツールにアクセス

DevTools が Edge で開いているので、[ようこそ] タブが表示されます。

次のステップは、[レンダリング] タブを開くことです。必要なことは次のとおりです。

1. 右上にある DevTools の 3 ドット メニューをクリックします。
2. [その他のツール]> [レンダリング] をクリックします .

3. [自動ダーク モードを有効にする] が見つかるまでスクロールします。 チェックボックスをクリックして、prefers-color-scheme をダークに設定する自動ダーク モードを有効にします。

自動ダーク モードへの変更は瞬時に行われるため、変更を有効にするために Web ページを更新する必要はありません。