Theme awareness for UXP - CSS and different states

Photoshop UXP Plugin API
1

Hi,

I’ve found interesting options that can be used in CSS and will let custom html elements be theme aware.

for example:

    .divicon:hover{
      background-color: var(-uxp-host-widget-hover-background-color);
    }

There are options for regular and hover state but not for active.

Do you know if they exist?

This is the reference:

https://www.adobe.io/photoshop/uxp/guides/theme-awareness/

Luckily, Photoshop exposes a number of theme-specific CSS variables that are perfect for making your plugin respond to the user’s theme color choice. These variables are:

  • –uxp-host-background-color
  • –uxp-host-text-color
  • –uxp-host-border-color
  • –uxp-host-link-text-color
  • –uxp-host-widget-hover-background-color
  • –uxp-host-widget-hover-text-color
  • –uxp-host-widget-hover-border-color

And a few more:

  • –uxp-host-text-color-secondary
  • –uxp-host-link-hover-text-color
  • –uxp-host-label-text-color

Finally, there are three dealing with font size:

  • –uxp-host-font-size
  • –uxp-host-font-size-smaller
  • –uxp-host-font-size-larger
2

I was also looking to change the Background Color of an SP-Action-Button when it’s active but had no success so I came to the conclusion its not available

3

This works just fine for me

        .btn-color-#{$color} {
          background-color: $rgbColor;

          &:hover {
            background-color: $btnHoverColor;
          }

          &:active {
            background-color: $btnActiveColor;
          }
        }
4

Hi, I’m getting errors when I’m using this code:

Zrzut ekranu 2021-12-9 o 19.47.34
Zrzut ekranu 2021-12-9 o 19.47.34974×1016 130 KB

5

Well… It’s a copy-paste from my SCSS with some variables. You should use it like:

.btn-color-blue {
  background-color: blue;
}

.btn-color-blue:hover {
  background-color: cyan;
}

.btn-color-blue:active {
  background-color: magenta;
}
6

Is it possible to change the element in html (like logo.png) based on theme?

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
8

Suggestion :slight_smile:

if (descriptor.to?.kuiBrightnessLevel) {
1 Like
9

Thank you very much Simon,

I’ve found a way to do it in CSS:

  @media (prefers-color-scheme: dark), (prefers-color-scheme: darkest) {
    .logo{background: url('./img/logo2502.png') no-repeat;}

  }

  
@media (prefers-color-scheme: light), (prefers-color-scheme: lightest)
 {
.logo{background: url('./img/logo2502dark.png') no-repeat;}
 }


.logo {
    text-align: center;
    margin-bottom: 12px;
    margin-top: 12px;
    width: 250px;
    height: 35px;
}
1 Like
10

Yes that works, too. I though you were explicitly looking for a solution to change HTML, but if you only need to switch the image, the CSS background / background-image property also works fine.

1 Like