使用 渲染 工具查看不同顯示選項或視覺缺陷後，你的網頁呈現什麼樣子。
許多作業系統都有辦法將任何應用程式顯示為較深或較淺的顏色。 在暗黑模式作業系統中，網站採用光色方案可能難以閱讀，對部分使用者來說可能是無障礙問題。
為了測試使用者選擇暗色或淺色模式時網頁的呈現效果，你可以在 Microsoft Edge DevTools 中選擇 Emulate CSS prefers-color-scheme： dark 或 light，而不是更改自己機器的暗色或 亮 色設定。 或者，你可以根據你在電腦上的偏好設定，選擇 預設的「無模擬」，讓網頁自動選擇暗色或淺色模式。
你可以從 渲染 工具或 命令選單中選擇這些設定，如下所述。
若要指定用於淺色與深色配色的 CSS，請使用 prefers-color-scheme CSS 媒體查詢，判斷使用者偏好以深色或淺色顯示產品，然後自動選擇自訂的淺色或深色 CSS。 範例 CSS 程式碼可見於 「檢查暗色主題與淺色主題的對比問題」。
使用渲染工具模擬暗或亮模式
要開啟 DevTools，請右鍵點擊網頁，然後選擇 檢查。 或者，在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。 DevTools 開啟。
在 DevTools 的 活動欄 或 快速檢視中，選擇 渲染 標籤。如果該分頁看不到，請點擊 「更多工具 」
) 按鈕。在 Emulate CSS 的媒體功能偏好色彩方案 下拉選單中，選擇 偏好色彩方案：暗色 或 偏好色彩方案：淺色：
渲染後的網頁呈現出的效果，就像使用者在作業系統中選擇了暗或亮模式一樣。 網頁使用你指定的該模式 CSS。
修改你的 CSS，並以與其他網頁相同的方式查看渲染結果。 請參見：開始檢視並更改 CSS。
要恢復設定，在 渲染 工具中， Emulate CSS 媒體功能偏好色彩方案 下拉選單，選擇 「無模擬」。 會套用你自己作業系統的光暗模式設定。
使用指令選單模擬暗色或淺色模式
當 DevTools 有焦點時，請選擇 Windows、Linux) (Ctrl+Shift+P 或 macOS) (選擇 Command+Shift+P 開啟指令選單。
輸入 dark、 light 或 emulate，選擇 Emulate CSS prefers-color-scheme： dark 或 Emulate CSS prefers-color-scheme： light，然後按下 Enter：
渲染後的網頁呈現出的效果，就像使用者在作業系統中選擇了暗或亮模式一樣。 網頁使用你指定的該模式 CSS。
選擇 渲染指令 而非 外觀 指令。 渲染指令會影響正在開發的渲染網頁。 Appearance 指令反而影響視窗中的 DevTools 部分。
修改你的 CSS，並以與其他網頁相同的方式查看渲染結果。 請參見：開始檢視並更改 CSS。
要還原設定，請在 指令選單中輸入 emulate 或 scheme ，然後選擇 Do Not Emulate CSS prefers-color-scheme。 會套用你自己作業系統的光暗模式設定。
另請參閱
- 在效能特徵參考中使用渲染工具分析渲染效能。
渲染工具也用於以下任務：