VMware vSphere SDKs and Tools 8.0

8.0 7.0 6.7 6.5

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.
  1. 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"
      }
    }
  }
},
...
  2. 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.
  3. Save your changes and close the manifest file.
Write front-end code to load style sheets that match the theme selected by the user.

Content feedback and comments