Theme

The theme of a user or group of users can be configured using the theme setting. See Settings. The valid values for this setting are "light-activeviam", "dark-activeviam" and the keys of the registered custom themes.

Register a custom theme

This section applies if you are using the ActiveUI starter. If you are not, then read Theming ActiveUI components integrated into a different application. If you plan to use the ActiveUI starter but don't know how to, then read Setup first and come back here.

In order to register a custom theme, you must follow these 3 steps:

• create a theme file
• generate its corresponding CSS file
• provide the theme

Create a theme file

In the src folder of your project create a new folder named theme, then create a file named custom-theme.json inside this folder with the following content:

{  "primaryColor": "#9900ff"}

This is a basic example. Refer to Theme for a list of all the attributes that can be configured in this file.

Generate a CSS file

Run the following command in order to generate a CSS file from your theme file and place it under build/style:

yarn activeui-scripts generate-css -i src/theme -o build/style

note

You must first run yarn to install the project dependencies. Otherwise, you will not have access to the active-scripts command.

This command creates a CSS file in the output folder for each JSON file in the input folder.

Your project should now look like this:

• build
  • style
    • custom-theme.antd.css
    • dark-activeviam.antd.css
    • light-activeviam.antd.css
• src
  • theme
    • custom-theme.json

To run this command automatically whenever you run yarn build, you can add the following to your package.json:

  scripts: {+   "postbuild": "activeui-scripts generate-css -i src/theme -o build/style"  }

Provide a theme

In order for your theme to be known by ActiveUI, you must attach it to your configuration. This can be done as follows in your index.tsx:

+ import customTheme from "./theme/custom-theme.json";
  activate: async (configuration) => {+   configuration.themes = {+     "custom-theme": customTheme+   }  }

note

The key of your theme in configuration.themes must be the same as the name of your CSS file.

Style overlays

If you are using Ant Design components with overlays in your extensions (such as Modal, Notification, AutoComplete, Menu, Select, Tooltip), then you might notice that their CSS is not applied to these overlays. You can fix this by making sure that they are mounted within the DOM element with id activeui-overlay-root, using their getPopupContainer property. For instance with Tooltip:

  <Tooltip+   getPopupContainer={() => document.getElementById("activeui-overlay-root")}  >    ...  </Tooltip>

Theming ActiveUI components integrated into a different application

This more advanced section is only useful if you are NOT using the ActiveUI starter.

First, create a theme file and generate its corresponding CSS file, as explained above. Place the CSS file inside a folder accessible to your bundler, such as src.

Then import the CSS file in your index.tsx:

+ import "./custom-theme.antd.css";

Use ThemeProvider to provide your theme to all underlying components:

+ import { ThemeProvider } from "@activeviam/activeui-sdk";+ import customTheme from "./theme/custom-theme.json";
+   <ThemeProvider value={customTheme}>      <App />+   </ThemeProvider>

warning

For the CSS to be applied to the relevant DOM elements, they must be placed below an element with the class ant-root. This is to ensure that ActiveUI components can be integrated into any existing web application without breaking its style. See the relevant Ant Design issue. To make it work, you can either:

1. Add class="ant-root" to your page's body.

Or, if the first option doesn't work for your application:

2. Add an element with class="ant-root" above each part of your DOM containing ActiveUI elements.

Then, for Ant Design overlays to be styled properly, you must add an element with id="activeui-overlay-root" in your DOM, below an element with class="ant-root". The simplest solution is usually to add it as a child of your page's body:

<body class="ant-root">  <div id="root" />+ <div id="activeui-overlay-root" /></body>

Finally, make sure that all Ant Design overlays are mounted within this element. See Style overlays.