Edit in GitHubLog an issue

prefers-color-scheme

Since: UXP 4.1, PS 22.0.0

Enables you to restrict a set of CSS rules to match only when a specific theme is being used by the host application.

ValuePsXd
lightest*
light
medium
dark
darkest

* XD only supports a single theme. This wll match the "lightest" theme in XD 35.

Example

Copied to your clipboard
1:root {
2 --primary-color: #E8E8E8; /* default colors are for dark themes */
3}
4@media (prefers-color-scheme: lightest), (prefers-color-scheme:light) {
5 :root {
6 --primary-color: #181818; /* override for light themes */
7 }
8}

Known Issues#

  • There are occasionally race conditions when applying colors based on this media query, especially for styles created and then applied dynamically. Generally the only time the colors are guaranteed to be correct are when a plugin is loaded or when a theme change is complete.
Copyright © 2021 Adobe. All rights reserved.