在轉譯的頁面中模擬深色或淺色配置

使用 轉譯 工具來查看網頁在不同的顯示選項或視覺缺陷中的外觀。

許多操作系統都有辦法以較深或較淺的色彩顯示任何應用程式。 在深色模式操作系統中擁有淺色配置的網站可能難以閱讀，而且對某些使用者而言可能是輔助功能問題。

若要測試當使用者選取深色或淺色模式時網頁的呈現方式，而不是變更您自己計算機的深色模式或淺色模式設定，您可以選取 [模擬 CSS 偏好色彩配置： Microsoft Edge DevTools 中的深色或 淺色 ]。 或者，您可以選取預設值 [ 沒有模擬]，讓網頁根據您在計算機上的慣用設定自動選取深色或淺色模式。

您可以從轉 譯工具或 從 [ 命令] 功能選取這些設定，如下所述。

若要指定要用於淺色和深色配置的 CSS，請使用 prefers-color-scheme CSS 媒體查詢來偵測使用者是否偏好以深色或淺色色彩配置顯示您的產品，然後自動選取您自己的自定義淺色或深色模式 CSS。 範例 CSS 程式代碼會顯示在 檢查深色主題和淺色主題的對比問題中。

使用轉譯工具模擬深色或淺色模式

1. 若要開啟 DevTools，請以滑鼠右鍵按兩下網頁，然後選取 [ 檢查]。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 隨即開啟。

2. 在 DevTools 的 [活動列 ] 或 [ 快速檢視] 上，選取 [ 轉譯] 索引 標籤。如果看不到該索引標籤，請按兩下 [ 其他工具 ] ([ ) 按鈕。

3. 在 [ 模擬 CSS 媒體功能 prefers-color-scheme ] 下拉式清單中，選取 prefers-color-scheme：深色 或 prefers-color-scheme：淺色：

   

   轉譯的網頁會轉譯為使用者在其操作系統中選取了深色或淺色模式。 網頁會使用您為該模式指定的 CSS。

4. 修改您的 CSS，並以與任何其他網頁相同的方式檢視轉譯的結果。 請參閱 開始檢視和變更 CSS。

5. 若要還原設定，請在 [ 轉 譯] 工具的 [ 模擬 CSS 媒體功能偏好色彩 配置] 下拉式清單中，選取 [ 無模擬]。 套用您自己作業系統的淺色或深色模式設定。

使用命令功能表模擬深色或淺色模式

1. 當 DevTools 取得焦點時，請選取 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 來開啟 [命令功能表]。

2. 輸入 深色、 淺色或 模擬，選取 [模擬 CSS prefers-color-scheme：深色 ] 或 [模擬 CSS prefers-color-scheme： light]，然後按 Enter：

   

   轉譯的網頁會轉譯為使用者在其操作系統中選取了深色或淺色模式。 網頁會使用您為該模式指定的 CSS。

   選取 [轉譯] 命令，而不是 [ 外觀 ] 命令。 轉 譯 命令會影響開發中轉譯的網頁。 [外觀] 命令會改為影響視窗的 DevTools 部分。

3. 修改您的 CSS，並以與任何其他網頁相同的方式檢視轉譯的結果。 請參閱 開始檢視和變更 CSS。

4. 若要還原設定，請在 [命令功能表] 中輸入模擬或配置，然後選取 [不要模擬 CSS prefers-color-scheme]。 套用您自己作業系統的淺色或深色模式設定。

另請參閱

• 使用 效能功能參考中的轉譯工具來分析轉 譯效能。

轉 譯 工具也用於下列工作：

• 檢查深色主題和淺色主題的對比問題
• 確認頁面可供色盲人士使用
• 確認頁面可搭配模糊視覺使用
• 確認頁面可使用且已關閉UI動畫
• 模擬視覺缺陷
• 模擬縮減動作