Theming

Theming is a 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.

Theming

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 continues 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 a theming helper, that lets us create nested theming solutions. As of now, it does not deliver any extra features beside the principle.

import { Theme, useTheme } from '@dnb/eufemia/shared'

const Component = () => {
  const { name, variant } = useTheme()
  return 'My Component'
}

render(
  <Theme name="theme-name" variant="theme-variant">
    <Component />
  </Theme>
)

In addition, you can use this helper function to show/hide content based on the theme.

import { Theme, VisibilityByTheme } from '@dnb/eufemia/shared'

render(
  <Theme>
    <VisibilityByTheme visible="sbanken">
      Only shown in Sbanken theme
    </VisibilityByTheme>

    <VisibilityByTheme hidden="eiendom">
      Only hidden in Eiendom theme
    </VisibilityByTheme>

    <VisibilityByTheme visible={['sbanken', 'eiendom']}>
      Only shown in Sbanken or Eiendom theme
    </VisibilityByTheme>

    <VisibilityByTheme
      visible={[{ name: 'sbanken' }, { name: 'eiendom' }]}
    >
      Only shown in Sbanken or Eiendom theme
    </VisibilityByTheme>

    <VisibilityByTheme
      visible={[{ name: 'sbanken' }, { name: 'eiendom', variant: 'blue' }]}
    >
      Only shown in Sbanken then or Eiendom theme – that also includes the
      fictive variant="blue".
    </VisibilityByTheme>
  </Theme>
)

<Theme> Will create a div wrapper by default, when no custom element is defined (element="span"). It sets these CSS classes:

eufemia-theme__{theme-name}
eufemia-theme__{theme-name}--{theme-variant}

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'

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
        }
      })
    ]
  }
}

#Theming

#Integrated theming

#Theme Component and useTheme Hook

#Brand theming

#Run your application with a different theme

#WIP: Ready to use themes