VMware vSphere SDKs and Tools 7.0

8.0 7.0 6.7 6.5

Building Output Style Sheets for vSphere Client Plug-Ins

After you isolate theme-dependent colors or styles as CSS variables, you can merge the resulting style sheets with the standard Clarity styles to produce a set of output style sheets for optimized performance.
Refactor the input style sheets for the plug-in so that they isolate theme-dependent colors and styles in separate style sheets as CSS variables.
Angular applications which use
webpack
 and
angular-cli
 place the style sheet declarations inline by default, when in development mode. Inline style declarations interfere with dynamic CSS loading. When you build the output style sheets, always configure the build to output and use external CSS:
To build external style sheets, add the
--extract-css
 parameter to the
ng build
 command. The vSphere Client SDK has examples of this usage in
html-client-sdk/samples/remote-plugin-sample/src/main/ui/package.json
.
You must disable any output file name hashing in the development and production builds. Otherwise the names of the style sheet files will change whenever the code changes, and the plug-in will not be able to load them.
To disable file name hashing when you build style sheets, use this syntax:
ng build --prod --output-hashing none
.
  1. Create a base output style sheet that is independent of the themes.
    The base style sheet contains the Clarity icons style sheet and the base input style sheet for the plug-in, which uses CSS variables. The vSphere Client SDK builds this output style sheet by using Angular to compile the SCSS.
    The following example comes from the vSphere Client SDK file
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/angular-cli.json
    . 
    "styles": [
  {
    "input": "../node_modules/clarity-icons/clarity-icons.min.css",
    "output": "styles",
    "lazy": true
  },
  {
    "input": "styles.css",
    "output": "styles",
    "lazy": true
  }
  ...
]
    This step combines the contents of
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/node_modules/remote-plugin-sample/src/main/ui/styles.css
     and
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/styles.css
     into
    html-client-sdk/samples/remote-plugin-sample/target/classes/ui/styles.bundle.css
    .
  2. Create an output style sheet file for the
    light
     theme.
    This style sheet includes the Clarity style sheet for the
    light
     theme and the plug-in style sheet for the
    light
     theme, which contains the CSS variable definitions for the
    light
     theme.
    The following example comes from the vSphere Client SDK file
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/angular-cli.json
    . 
    "styles": [
  ...
  {
    "input": "../node_modules/clarity-ui/clarity-ui.min.css",
    "output": "theme-light",
    "lazy": true
  },
  {
    "input": "styles-light.css",
    "output": "theme-light",
    "lazy": true
  }
  ...
]
    This step combines the contents of
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/node_modules/clarity-ui/clarity-ui.min.css
     and
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/styles-light.css
     into
    html-client-sdk/samples/remote-plugin-sample/target/classes/ui/theme-light.bundle.css
    .
  3. Create an output style sheet file for the
    dark
     theme.
    This style sheet includes the Clarity style sheet for the
    dark
     theme and the plug-in style sheet for the
    dark
     theme, which contains the CSS variable definitions for the
    dark
     theme.
    The following example comes from the vSphere Client SDK file
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/.angular-cli.json
    . 
    "styles": [
  ...
  {
    "input": "../node_modules/clarity-ui/clarity-ui-dark.min.css",
    "output": "theme-dark",
    "lazy": true
  },
  {
    "input": "styles-dark.css",
    "output": "theme-dark",
    "lazy": true
  }
  ...
]
    This step combines the contents of
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/node_modules/clarity-ui/clarity-ui-dark.min.css
     and
    html-client-sdk/samples/remote-plugin-sample/src/main/ui/src/styles-dark.css
     into
    html-client-sdk/samples/remote-plugin-sample/target/classes/ui/theme-dark.bundle.css
    .
Write front-end code to load style sheets that match the theme selected by the user.

Content feedback and comments