#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:

// 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'

#Gatsby Plugin

The gatsby-plugin-eufemia-theme-handler plugin makes it easy to add the needed styles and provides also a runtime style switch mechanism.

#Importing styles from within CSS

@import url('@dnb/eufemia/style/dnb-ui-core.css');
@import url('@dnb/eufemia/style/themes/theme-ui/ui-theme-components.css');
@import url('@dnb/eufemia/style/themes/theme-ui/ui-theme-basis.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/core'
import '@dnb/eufemia/style/themes/ui/basis'

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