@db-ux/db-theme

We provide a db-theme for Deutsche Bahn Apps in this package. Some asset files are encrypted. To decrypt them you need to go to Marketingportal (Note: Deep links aren't working, you need to click the link again after login). In case you have access to DB internal systems, you'll even also find information on using the inner source package on this Marketingportal website.

You will find two environment variables on the page:

• ASSET_PASSWORD
• ASSET_INIT_VECTOR

Before you install @db-ux/db-theme you need to provide those as environment variables within your environment, like e.g. in a Pipeline. On your localhost, you might …

• add .env to your .gitignore and
• create an .env file

Afterward, you add those two variables to the .env file:

ASSET_PASSWORD=ABC
ASSET_INIT_VECTOR=ABC

The postintall script inside the dependent packages will decrypt the files for you.

Note: You can use process.env. local or in CI/CD to pass the required environment variables to postinstall.

Install

Note: Read the disclaimer above :)

npm i @db-ux/db-theme

Usage with @db-ux/core-components

Import

There are different ways to include the theme. Therefore, you need to import the correct .css file. There are multiple files depending on the bundler you use. [TYPE] should be replaced with your bundler, if you don't use relative paths:

• relative: No bundler
• absolute: No bundler
• rollup: vite, rollup
• webpack: webpack, nextjs

JS/TS

// main.[js|ts]
import "@db-ux/core-components/build/styles/[TYPE].css"; /* loads whitelabel */
import "@db-ux/db-theme/build/styles/[TYPE].css"; /* Overwrite whitelabel  */

CSS

/* main.css */
@import "@db-ux/core-components/build/styles/[TYPE].css"; /* loads whitelabel */
@import "@db-ux/db-theme/build/styles/[TYPE].css"; /* Overwrite whitelabel  */

Vite

You might need to add an additional resolve in vite.config.[js|ts]:

import * as path from "node:path";

export default defineConfig({
    ...
    resolve: {
        alias: {
            "@db-ux": path.resolve("node_modules/@db-ux"),
        },
    },
});

Advanced Settings

Instead of overwriting the whitelabel ([TYPE].css) you could also include each .css you need in your project:

// main.[js|ts]

/* load components */
import "@db-ux/core-components/build/styles/index.css";

/* load foundations (optional) */
import "@db-ux/core-foundations/build/styles/helpers/classes/all.css";
import "@db-ux/core-foundations/build/styles/density/classes/all.css";
import "@db-ux/core-foundations/build/styles/fonts/classes/all.css";
import "@db-ux/core-foundations/build/styles/colors/classes/all.css";

/* load assets */
import "@db-ux/db-theme-fonts/build/styles/[TYPE].css";
import "@db-ux/db-theme-icons/build/styles/[TYPE].css";

/* load theme */
import "@db-ux/db-theme/build/styles/index.css";

Deutsche Bahn brand

As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UI products free to use and release it under the Apache 2.0 license. Please have a look at our brand portal at https://marketingportal.extranet.deutschebahn.com/ for any further questions and whom to contact on any brand issues.

You aren't allowed to use this package or any of its contents (like e.g. design assets as well as protected characteristics and trademarks) for any usage outside of Deutsche Bahn websites and applications.

License

This project is licensed under special Apache-2.0, see the LICENCE file in this package.