Themes
Themes are built leveraging CSS Custom Properties. Themes are applied by setting the nve-theme attribute on the host html element.
Themes can be independently loaded as needed to reduce the size of the initial bundle.
@import '@nvidia-elements/themes/fonts/inter.css';
@import '@nvidia-elements/themes/index.css';
@import '@nvidia-elements/themes/dark.css';
@import '@nvidia-elements/themes/high-contrast.css';
@import '@nvidia-elements/themes/reduced-motion.css';
@import '@nvidia-elements/themes/compact.css';
@import '@nvidia-elements/themes/debug.css';
<html lang="en" nve-theme="dark">
Autodetect Preferences
Themes can be applied dynamically based on user preferences.
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.setAttribute('nve-theme', 'dark');
}
if (window.matchMedia('(-ms-high-contrast: active)').matches || window.matchMedia('(forced-colors: active)').matches) {
document.body.setAttribute('nve-theme', 'high-contrast');
}
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.body.setAttribute('nve-theme', 'reduced-motion');
}
Dark
@import '@nvidia-elements/themes/dark.css';
Light (Default)
@import '@nvidia-elements/themes/index.css';
Debug
The debug theme will highlight elements with a green outline, layouts with a purple outline and typography with a gold outline.
@import '@nvidia-elements/themes/debug.css';
High Contrast
@import '@nvidia-elements/themes/high-contrast.css';