Skip to content
Home

Theme

Info
Demos
Properties

Description

The Theme component is a helper component that lets you create nested theming solutions.

<Theme> will by default create a div wrapper, when no custom element is defined (e.g. element="span").

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


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


render(
  <Theme name="sbanken">
    <App>
      <MyComponent />
    </App>
  </Theme>,
)

NB: If no context is given, the hook will return null.

From CSS you can use it as so:

  • .eufemia-theme__sbanken
  • .eufemia-theme[data-name="sbanken"] (alternative)

CSS

.eufemia-theme__sbanken .additional-selector {
  --color-sea-green: var(--sb-color-purple-alternative);
}

SCSS

:global(.eufemia-theme__sbanken) {
  .additional-selector {
    --color-sea-green: var(--sb-color-purple-alternative);
  }
}

Mapping of properties with propMapping

In order to change or map CSS properties, you can make use of the propMapping solution.

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


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


render(
  <Theme name="sbanken">
    <App>
      <Theme propMapping="my-class">
        <MyComponent />
      </Theme>
    </App>
  </Theme>,
)

The main motivation of this feature is to provide a set of maps you can use in your app (if possible). But it lets you create your own sets as well. To do so:

  1. Define an area in your app – it could be your component – and give it a declarative name:
import { Theme } from '@dnb/eufemia/shared'


render(
  <Theme propMapping="my-maps">
    <MyComponent />
  </Theme>,
)
  1. Define the needed properties:

CSS

.eufemia-theme__theme-name.eufemia-theme__prop-mapping--my-maps {
  --color-sea-green: var(--sb-color-purple-alternative);
}

SCSS

.eufemia-theme__theme-name.eufemia-theme__prop-mapping--my-maps {
  --color-sea-green: var(--sb-color-purple-alternative);
}

Use your component as the wrapper element

You can provide your component as the wrapper. This way no additional HTML Element will be created.

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


const Component = ({ className ...props }) => {
  return <div className={className+' more-classes'} {...props} />
}


render(
  <Theme name="theme-name">
    <App>
      <Theme propMapping="my-maps" element={Component}>
        ...
      </Theme>
    </App>
  </Theme>
)

React Hook useTheme

For accessing the theme context, you can use the useTheme Hook. It returns the theme context, with an addition of boolean constants like isSbanken.

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


const Component = () => {
  // Result: { name: 'sbanken', isUi: false, isSbanken: true, isEiendom: false }
  const { name, isUi, isSbanken, isEiendom } = useTheme()
  return null
}


render(
  <Theme name="sbanken">
    <App>
      <MyComponent />
    </App>
  </Theme>,
)

Integrations

By using the gatsby-plugin-eufemia-theme-handler plugin, your app will get wrapped with this theme component.

Hide or show parts of your component (filter)

With this helper function you show or hide content based on inherited theme properties.

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


render(
  <Theme name="...">
    <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>,
)

Demos

Basis example

Code Editor
render(
  <Theme name="sbanken">
    <Logo size={40} />
  </Theme>,
)

Basis example propMapping

Text with custom color

Code Editor
const MyMapping = styled.div`
  .eufemia-theme__sbanken.eufemia-theme__prop-mapping--my-mapping {
    --color-sea-green: var(--sb-color-purple-alternative);
  }
`
const CustomComponent = styled(P)`
  color: var(--color-sea-green);
`
render(
  <MyMapping>
    <Theme name="sbanken">
      <Theme propMapping="my-mapping">
        <CustomComponent>Text with custom color</CustomComponent>
      </Theme>
    </Theme>
  </MyMapping>,
)