diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_dark.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_dark.png index d7d6e0830557ad0..17644036f2775a5 100644 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_dark.png and b/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_dark.png differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_light.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_light.png index cbfb4a215ce9881..91655d3774a956c 100644 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_light.png and b/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_light.png differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_null.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_null.png index f04d1697234e165..159d2338a28b961 100644 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_null.png and b/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/color_scheme_null.png differ diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/index.html index 9f23597993d7cbf..d8bf81e8191473a 100644 --- a/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/index.html +++ b/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -22,7 +22,7 @@

Examine CSS rules

  • toggle pseudo-classes;
  • toggle classes;
  • add a new rule;
    • -
  • change the display based on the operating color scheme preference (light/dark mode);
    • +
  • change the display based on prefers-color-scheme media rules.
  • change the display based on print media rules.
    • @@ -198,11 +198,9 @@

    View @media rules for Print

    When on, any rules defined for printing the page will be displayed similar to the "Print Preview" mode that many word processing applications provide.

    -

    View @media rules for color-scheme-preference

    +

    View @media rules for prefers-color-scheme

    - - -

    You can use the color scheme simulator to see how the styles display based on the prefers-color-scheme media query, if it is defined for the page. The color scheme simulator has four states, which you can cycle through by clicking the button repeatedly:

    +

    The color scheme simulator buttons can be used to test the rendering of styles based on the prefers-color-scheme media query (if any are defined for the page). There are two buttons, which enable the light and dark preference respectively. Selecting either button deselects the other, and if neither button is selected then the simulator does not set a preference.

    @@ -221,23 +219,26 @@

    View @media rules for colo

    - + - + - +
    lightThe user prefers a light interface.The prefers-color-scheme media feature is set to light.
    darkThe user prefers a dark interface.The prefers-color-scheme media feature is set to dark.
    -

    Note that the first three states of the button may be difficult to distinguish visually. They typically produce a similar effect.

    +

    Note that if the operating system mode is set to a particular mode, then simulating that mode will not change page rendering (i.e. simulating dark mode when in dark mode will not change the display).

    + +
    +

    Note

    +

    If privacy.resistFingerprinting has been set true, the prefers-color-scheme preference is forced to light. You must set privacy.resistFingerprinting to false in order to use this feature.

    +

    Note

    -

    As of Firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the Configuration Editor to enable this feature.

    - -

    If you have set privacy.resistFingerprinting to true, prefers-color-scheme preference is overridden to light. In order to use this simulator, you must set privacy.resistFingerprinting to false.

    +

    Before Firefox 87 this feature is behind the preference devtools.inspector.color-scheme-simulation.enabled.

    Examine computed CSS

    diff --git a/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/rules_view_buttons_fx_72.png b/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/rules_view_buttons_fx_72.png index 0f6c31dc1efc152..8b764f2a967045a 100644 Binary files a/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/rules_view_buttons_fx_72.png and b/files/en-us/tools/page_inspector/how_to/examine_and_edit_css/rules_view_buttons_fx_72.png differ diff --git a/files/en-us/web/css/@media/prefers-color-scheme/index.html b/files/en-us/web/css/@media/prefers-color-scheme/index.html index 3968c485a0affc6..4aee9b1eb709d97 100644 --- a/files/en-us/web/css/@media/prefers-color-scheme/index.html +++ b/files/en-us/web/css/@media/prefers-color-scheme/index.html @@ -19,7 +19,7 @@

    Note

  • If privacy.resistFingerprinting is set to true, {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} always returns light.
  • Numeric preference ui.systemUsesDarkTheme can be set to 0 for light, 1 for dark, 2 for no-preference. Any other value causes Firefox to return light.
    • -

    Light and dark modes can also be simulated using the Firefox Page Inspector. +

    Light and dark modes can also be simulated using the Firefox Page Inspector.

    Syntax