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.
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 deactivate 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 deactivate file name hashing when you build
style sheets, use this syntax: ng build --prod --output-hashing none.
Prerequisites
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.
Procedure
-
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.
-
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.
-
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.
What to do next
Write
front-end code to load style sheets that match the theme selected by the user.