Using Style Variables in Plug-In CSS

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.

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.

Prerequisites

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.

Procedure

Identify any theme-dependent colors or styles in your plug-in.
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;
      }
```
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);
          }
```
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>
```

What to do next

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.