#Importing the CSS

To include the packages dnb-ui-core, ui-theme-basis and ui-theme-components in a Node.js based environment (given you have a CSS loader in place), do this:

Style package structure: The theme package ui-theme-components includes both component and Eufemia Forms styles (Field, Value, Form layout, Wizard, etc.).

// This includes the `dnb-ui-core`, `ui-theme-components` and `ui-theme-basis`
import '@dnb/eufemia/style'

#Select a theme

The above import is a shorthand for the DNB main theme. It is equivalent to the following import:

// This is identical to `import '@dnb/eufemia/style'`
import '@dnb/eufemia/style/core'
import '@dnb/eufemia/style/themes/ui'

To import another theme, replace the second import:

// This imports the sbanken theme instead
import '@dnb/eufemia/style/core'
import '@dnb/eufemia/style/themes/sbanken'

#Runtime theme switching

If your application needs to switch theme at runtime, preload the relevant theme CSS files and update the active theme through your application state.

#Importing styles from within JavaScript

import '@dnb/eufemia/style/dnb-ui-core.min.css'
import '@dnb/eufemia/style/themes/ui/ui-theme-components.min.css'
import '@dnb/eufemia/style/themes/ui/ui-theme-basis.min.css'

#Importing styles from within CSS

@import url('@dnb/eufemia/style/dnb-ui-core.min.css');
@import url('@dnb/eufemia/style/themes/ui/ui-theme-components.min.css');
@import url('@dnb/eufemia/style/themes/ui/ui-theme-basis.min.css');

#Legacy import

The legacy import import '@dnb/eufemia/style/basis' scopes global css so it does not affect the whole page. But requires that you place a wrapper element with class .dnb-core-style around all Eufemia elements. And may causes some css specificity issues.

If possible, it should be replaced with import '@dnb/eufemia/style/core' that attaches the same css to the body tag instead.

Read more about how to deal with existing styles.

import '@dnb/eufemia/style/basis' // replaced by '@dnb/eufemia/style/core'
import '@dnb/eufemia/style/themes/ui'

#Single Component only

It is possible to import a single CSS Style of a single component at once:

// Imports the core css for the theme
import '@dnb/eufemia/style/dnb-ui-core.min.css'
import '@dnb/eufemia/style/themes/ui/ui-theme-basis.min.css'

// Imports only the Button CSS and Main DNB Theme
import '@dnb/eufemia/components/button/style/dnb-button.min.css'
import '@dnb/eufemia/components/button/style/themes/dnb-button-theme-ui.min.css'