Configuring Theme-Dependent Icons for vSphere Client Remote Plug-ins

When you refactor style sheets for your plug-in to accommodate theme changes, you can also specify icons suited for alternative themes. You specify theme-dependent icons in the plug-in manifest file.

Configuring theme-dependent icons is an optional step that can improve the user experience after a theme change.

Procedure

Edit the plug-in manifest file, plugin.json, and locate the iconSpriteSheet property at the second level of the JSON, within the definitions property.

...
"definitions": {
  "iconSpriteSheet": {
    "uri" : "assets/images/sprites.png",
    "definitions": {
      "main" : {
        "x": 0,
        "y": 96
      }
    }
  },
  "i18n": {
    "locales": ["en-US"],
    "definitions": {
      "plugin.name": {
        "en-US": "Theme Example"
      }
    }
  }
},
...

Within the iconSpriteSheet property, add a themeOverrides property that maps each theme name to a URI and the coordinates of its theme-dependent icons.
The structure of each theme property inside the themeOverrides property is identical to the structure of the iconSpriteSheet property, which contains a uri and a definitions property.
```
...
"definitions": {
  "iconSpriteSheet": {
    "uri" : "assets/images/sprites.png",
    "definitions": {
      "main" : {
        "x": 0,
        "y": 96
      }
    },
  "themeOverrides": {
    "dark": {
      "uri": "assets/images/sprites_dark.png",
      "definitions": {
        "main": {
          "x": 0,
          "y": 96
        }
      }
    }
  },
  "i18n": {
    "locales": ["en-US"],
    "definitions": {
      "plugin.name": {
        "en-US": "Theme Example"
      }
    }
  }
},
...
```
A best practice is to maintain a separate style sheet for each theme, with corresponding icons in the same positions. When you do this, you do not need to override the default coordinates, and you can omit the definitions from the themeOverrides element.
Save your changes and close the manifest file.

What to do next

Write front-end code to load style sheets that match the theme selected by the user.