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';@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"><html lang="en" nve-theme="dark">
If your application cannot access root nodes like html or body then apply nve-theme="root" to set the root background colors and fonts. 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');
} 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';@import '@nvidia-elements/themes/dark.css';
default emphasis destructive disabled
label message label option 1 option 2 option 3 message
default accent warning success danger
default emphasis destructive disabled
label message label option 1 option 2 option 3 message
default accent warning success danger
Light (Default) @import '@nvidia-elements/themes/index.css';@import '@nvidia-elements/themes/index.css';
default emphasis destructive disabled
label message label option 1 option 2 option 3 message
default accent warning success danger
default emphasis destructive disabled
label message label option 1 option 2 option 3 message
default accent warning success danger
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';@import '@nvidia-elements/themes/debug.css';
default emphasis destructive disabled
label message label option 1 option 2 option 3 message
default accent warning success danger
default emphasis destructive disabled
label message label option 1 option 2 option 3 message
default accent warning success danger
High Contrast @import '@nvidia-elements/themes/high-contrast.css';@import '@nvidia-elements/themes/high-contrast.css';
default emphasis destructive disabled
label message label option 1 option 2 option 3 message
default accent warning success danger
default emphasis destructive disabled
label message label option 1 option 2 option 3 message
default accent warning success danger