#Theming

Table of Contents

• Theming
  • Integrated theming
    • Theme Component and useTheme Hook
    • Brand theming
  • Run your application with a different theme
  • WIP: Ready to use themes
    • Using postcss-replace

Theming is an umbrella term of a wide range of different ways and needs of customization.

This section covers some of the needs we've seen in DNB productions as of now.

You may also check out the section in the contribution docs on how to maintain and create a theme or how to deal with the brand as a developer.

#Integrated theming

Eufemia supports theming right inside where all the style-sources lives. Having the ability to control different styles as close to the source as possible, will make it possible to carefully handle continuous improvements over time.

Themes are independent style packages, which should not be imported in parallel. But rather either – or.

#Theme Component and useTheme Hook

Eufemia has theming helpers, that lets you create nested theming solutions.

#Brand theming

Eufemia is a design system that aims to help DNB brands unleash their power.

Eufemia is a system that is built on top of brand-assets. This means, it should be possible to swap out or extend these brand-assets.

Therefore, instead of overwriting Eufemia (DNB main brand) styles inside projects, it is beneficial to create additional brand themes – directly where the source of the original brand lives.

The default DNB brand theme is called: ui which stands for universal identity.

#Run your application with a different theme

You can easily switch the static import of styles to a different theme:

import '@dnb/eufemia/style/core' // or /basis, when "dnb-core-style" is used
- import '@dnb/eufemia/style/themes/ui'
+ import '@dnb/eufemia/style/themes/eiendom'

Read more about how to import styles.

How ever, giving the user the ability to switch a theme during runtime, is a very much different challenge.

The Eufemia Portal (documentation) uses gatsby-plugin-eufemia-theme-handler to handle it both in development and production mode.

#WIP: Ready to use themes

Right now, theres work going on to create Eufemia Themes that utilize both color and spacing and the Spatial system.

The plan is to extend the documentation here later on, with how to select and use a theme inside an application.

#Using postcss-replace

If your applications only need new colors or other CSS properties, you could simply replace all the properties with postcss-replace using this config scheme:

{
  resolve: 'gatsby-plugin-postcss',
  options: {
    postCssPlugins: [
      require('postcss-replace')({
        pattern: /#([A-Fa-f0-9]+)/,
        data: {
          '007272': '#YOUR_COLOR' // sea-green
        }
      })
    ]
  }
}