深色或浅色配色方案模拟Dark or Light Color Scheme simulation

操作系统具有一种以较暗或更浅的颜色显示任何应用程序的方法。Operating systems have a way to display any application in darker or lighter colors. 在深色模式下操作系统中具有浅色主题的 Web 产品很正常,并且对于一些用户来说可能是一个辅助功能问题。Having a web product that has a light theme in a dark mode operating system is grating and can be an accessibility issue for some users. 在 Web 上,可以使用首选配色 方案 CSS 媒体查询检测用户是否希望以较暗或更浅的配色方案显示产品。On the web, you may use the prefers-color-scheme CSS Media Query to detect if users prefer to display your product in a darker or lighter colour scheme. 使用Microsoft Edge工具模拟从深色模式到浅色模式的变化,而无需更改整个操作系统。Use Microsoft Edge DevTools to simulate a change from dark to light mode without having to change the entire operating system.

  1. 打开“命令菜单”。Open the Command Menu.

    1. 选择 Ctrl + Shift + P \ (Windows/Linux) Command + Shift + P 或 \ (macOS) 。Select Ctrl+Shift+P (Windows/Linux) or Command+Shift+P (macOS).

      命令菜单

  2. 键入 emulate color ,选择模拟 CSS prefers-color-scheme: dark 或 Emulate CSS prefers-color-scheme: light, 然后选择 EnterType emulate color, choose either Emulate CSS prefers-color-scheme: dark or Emulate CSS prefers-color-scheme: light and then select Enter.

    命令菜单中的配色方案选项

    重要

    只需键入或不会显示正确的工具,因为还有一种方法可以选择 dark light DevTools 的主题Simply typing dark or light does not reveal the right tool, since there is also a way to choose a theme for DevTools. 如果想知道要选择什么,请确保选择的是呈现菜单项,而不是外观菜单项****。If you are wondering what to choose, make sure that you are choosing a rendering menu item, not an appearance menu item.

  3. 选择配色方案后,刷新当前文档以显示模拟模式。After you choose a color scheme, refresh the current document to display the simulated mode.

    DevTools Microsoft Edge模拟光模式

    像查看任何其他网页一样查看和更改 CSS。View and change your CSS like any other web page. 有关详细信息,请导航到"使用入门和更改 CSS"。For more information, navigate to Get Started With Viewing And Changing CSS.