VMware vSphere SDKs and Tools 8.0

8.0 7.0 6.7 6.5

Using Style Variables in Plug-In CSS
Last Updated December 16, 2024

If a plug-in uses custom styles that depend on the theme colors, the plug-in style sheets (CSS or SASS or LESS) need to be parameterized. This enables the plug-in to adapt when the user switches themes in the vSphere Client user interface.
Ensure that the plug-in's Clarity version supports the
dark
 theme. The first Clarity version to support the
dark
 theme is 0.10.16.
In this procedure you copy any custom colors that depend on the current theme into variables in separate style sheets that are specific to the
light
 or
dark
 theme. You replace the colors in the original style sheets with instances of CSS variables. This is done to avoid style sheet duplication and to easily integrate theming with any custom Angular components the plug-in has defined. For more information about CSS variables, see https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables.
  1. Identify any theme-dependent colors or styles in your plug-in.
  2. Factor out theme-dependent colors or styles into two new style sheets as CSS variables.
    The SDK includes the following sample file at
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/src/styles-light.css
    . 
    :root {
        --border-color: rgb(204, 204, 204);
        --overlay-color: rgba(255, 255, 255, 0.2);
        --info-icon-color: darkblue;
      }
    The SDK includes the following sample file at
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/src/styles-dark.css
    . 
    :root {
        --border-color: rgb(72, 87, 100);
        --overlay-color: rgba(0, 0, 0, 0.2);
        --info-icon-color: darkblue;
      }
  3. Replace the theme-dependent colors or styles in the original style sheets with variable references.
    The SDK includes the following code in the sample file at
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/src/app/views/list/list.component.scss
    . 
    .splitter {
            flex: 0 0 auto;
            width: 1px;
            margin: 0 20px;
            background-color: var(--border-color);
          }
  4. For Internet Explorer 11, which does not include support for CSS variables, include a polyfill library to provide support for CSS variables.
    The vSphere Client SDK includes a remote plug-in sample that uses
    css-vars-ponyfill
    . The following example is borrowed from
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/src/index.html
    . 
    <script type="text/javascript" src="scripts/css-vars-ponyfill.js"></script>
  • Configure theme-dependent icons in the plug-in manifest file.
  • Use the modified input style sheets to build the output style sheets for your plug-in.

Content feedback and comments