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.
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.
- 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 athtml-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 athtml-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 athtml-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 usescss-vars-ponyfill. The following example is borrowed fromhtml-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.