@dnb/eufemia

--- title: 'Theming' version: 11.3.0 generatedAt: 2026-05-19T08:46:50.028Z checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40 --- # Maintaining themes This section contains documentation about how to maintain and create a theme. You may also check out the section about [how to use a theme in your application](/uilib/usage/customisation/theming/). - [Maintaining themes](#maintaining-themes) - [Basis information](#basis-information) - [The building blocks](#the-building-blocks) - [Defining a fallback](#defining-a-fallback) - [Main theming file](#main-theming-file) - [Creating a new main theme](#creating-a-new-main-theme) - [Run the Portal with a different theme](#run-the-portal-with-a-different-theme) - [Show theme tag in Portal](#show-theme-tag-in-portal) - [Component theming](#component-theming) - [Button as an example](#button-as-an-example) - [CSS custom properties and :root](#css-custom-properties-and-root) - [Local Theming setup](#local-theming-setup) - [yarn link and SASS](#yarn-link-and-sass) - [Chrome Extension: Eufemia Theme Manager](#chrome-extension-eufemia-theme-manager) ## Basis information The default DNB brand theme is called: `ui` which stands for _universal identity_. ## The building blocks A theme consists of several files, which again includes SASS import declarations to single component styles. To include new or update component themes, run `yarn build`. It will find all related theme styles and put it inside the main theme file so they can get compiled to one CSS bundle. ### Defining a fallback Depending on the need of a theme, you can define a fallback to another theme. It will use that fallback theme as a basis, but use your new theme styles instead – as soon as one exists with the same name. Define a fallback inside a theme set: - `dnb-eufemia/src/style/themes/sbanken/sbanken-theme-components.scss` ```scss /** * ATTENTION: This file is auto generated by using "themeFactory". * But you still can change the content of this file on the very top. */ $THEME_FALLBACK: 'ui'; /** * NB: The content below is auto generated by the "themeFactory". * You may want to update it by running "yarn build" locally. */ @use '<auto-generated>/dnb-button-theme-ui.scss'; ``` and as soon as e.g. `dnb-button-theme-sbanken.scss` exists – it will be used instead of `dnb-button-theme-ui.scss`. ## Main theming file There is one **Main Theme File**, that includes all properties and element styles: - `dnb-eufemia/src/style/themes/ui/ui-theme-basis.scss` ### Creating a new main theme First, duplicate or create new SCSS files: - `dnb-eufemia/src/style/themes/<YOUR-THEME>/<YOUR-THEME>-theme-basis.scss` Do the same with every component (button etc.) you want to customize: - `dnb-eufemia/src/components/button/style/themes/dnb-button-theme-<YOUR-THEME>.scss` and run `yarn build`. All the related component theme file will then be created or updated. ### Run the Portal with a different theme Theme switching in the Portal is handled by the Vite theme handler shim (`vite/client/shims/theme-handler.ts`), which manages theme CSS via the `data-dnb-theme` attribute on `<html>`. - In the Portal Tools you can switch to a different theme (runtime). - You can also define a different theme in the URL itself `path/?eufemia-theme=eiendom` (runtime). ### Show theme tag in Portal Add the property `theme: 'sbanken'` to the main `.mdx` file for a Portal page to show a tag next to it when that theme is selected. This is currently mainly intended for Sbanken. Example: `/docs/components/button.mdx` ```mdx --- title: 'Button' description: 'The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism.' showTabs: true theme: ['sbanken'] --- ``` ## Component theming All components have a style separation of: - _layout_ where positioning and raw shapes are defined. - _skinning_ where colors and peculiarity are defined. This way we can create more easily custom skinned themes. ### Button as an example - All the raw _layout_ related CSS properties are in this one file `dnb-button.scss`. - While the theme file `dnb-button-theme-ui.scss` contains colorization and font sizes (_skinning_). ```js /button/style/dnb-button.scss // layout styles /button/style/themes/dnb-button-theme-ui.scss // main theme styles /button/style/themes/dnb-button-theme-eiendom.scss// additional theme styles ``` How `eiendom` is set up does not matter. It could either import parts from `ui` or be maintained independently. ### CSS custom properties and :root Whenever possible use Eufemia Properties inside Eufemia components. When defining custom properties for a component, **prefer** to put them inside the component scope: ```css .dnb-button { --text-size: var(--font-size-medium); } ``` In some circumstances, you may make them share-able and place them inside `:root`. They should then contain the component-name as a prefix. ## Local Theming setup There are several solutions to **create a new theme**. One of which is by using the [linking feature of Yarn](https://yarnpkg.com/lang/en/docs/cli/link/). ### yarn link and SASS Make sure your project can handle **\*.scss** files. **1.** make a copy of the [repository](https://github.com/dnbexperience/eufemia). Place it somewhere locally on your machine **2.** change your command line (Terminal) directory to the sub package `@dnb/eufemia` (_eufemia/packages/eufemia_) **3.** make the package ready for development by running: ```bash $ yarn install && yarn build && yarn link ``` **4.** on your application root directory, run: ```bash $ yarn link "@dnb/eufemia" ``` **5.** That's it. Now you can use (import/require) the NPM module in your application like: ```js import { Button } from 'dnb-eufemia/components' // See the "src" in the path? import 'dnb-eufemia/src/style/themes/ui/ui-theme-[MY THEME].scss' ``` **6.** Don't forget to add `"@dnb/eufemia": "*"` with the respective version (alongside React) to your dependencies: ```json "dependencies": { "@dnb/eufemia": "x", "react": "x", "react-dom": "x", ... } ``` ## Chrome Extension: Eufemia Theme Manager Use the [Chrome Browser Extension](https://chrome.google.com/webstore/detail/eufemia-theme-manager/pijolaebmeacaekbhoefjmhogckdcclb) to: - test themes on web applications - create new possible themes - look how the outcome would be if a theme would be used - and create areas where a different or a modified theme would make more sense You can also download the [Chrome Browser Extension (ZIP)](https://github.com/dnbexperience/eufemia-theme-manager/raw/main/eufemia-theme-manager-extension/web-ext-artifacts/eufemia_theme_manager-latest.zip), and install it manually in your browser. To do so, go to `chrome://extensions` and drag & drop the downloaded ZIP file in the opened extensions tab. Contributions are welcome. Here's the [source code](https://github.com/dnbexperience/eufemia-theme-manager).