Theme awareness for UXP - CSS and different states


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

for example:

      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:

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

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

This works just fine for me

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

          &:hover {
            background-color: $btnHoverColor;

          &:active {
            background-color: $btnActiveColor;

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

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;