Theme awareness for UXP - CSS and different states

Photoshop UXP Plugin API
7

Yes: The application has a property called kuiBrightnessLevel indicating the current theme. It can have the following values: 'kPanelBrightnessDarkGray' | 'kPanelBrightnessMediumGray' | 'kPanelBrightnessLightGray' | 'kPanelBrightnessOriginal'

In order to stay up-to-date, you can set up and event listener for the set event and then check if it matches a specific pattern to see if this specific settings was changed. This is how the set event descriptor would look like:

{
   "_obj": "set",
   "_target": [
      {
         "_ref": "property",
         "_property": "interfacePrefs"
      },
      {
         "_ref": "application",
         "_enum": "ordinal",
         "_value": "targetEnum"
      }
   ],
   "to": {
      "_obj": "interfacePrefs",
      "kuiBrightnessLevel": {
         "_enum": "uiBrightnessLevelEnumType",
         "_value": "kPanelBrightnessDarkGray"
      }
   }
}

so the handler could look like

const onSetEvent = (event, descriptor) => {
  if (descriptor.to && descriptor.to.kuiBrightnessLevel) {
    const activeTheme = descriptor.to.kuiBrightnessLevel._value
  }
};
2 Likes