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;

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

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 ( && {
    const activeTheme =

Suggestion :slight_smile:

if ( {
1 Like

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;

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