Skip to main content

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.

Create a custom theme​

This section applies if you are using the Atoti UI starter. If you are not, then read Use a custom theme in Atoti UI components integrated into a different application. If you plan to use the Atoti UI starter but don't know how to, read Setup first then come back here.

In order to create a custom theme, add its definition to your activate function in index.ts:

configuration.themes["custom"] = {
  primaryColor: "#9900ff",
};

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

note

The key of your theme is up to you, it does not have to be "custom". To use your theme, you need to set its key as your theme setting. See Settings.

Use a custom theme in Atoti UI components integrated into a different application​

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

To use a custom theme in Atoti UI components integrated into a different application, add a ThemeProvider above these components:

import { ThemeProvider } from "@activeviam/atoti-ui-sdk";

const customTheme = {
  primaryColor: "#9900ff",
}

return (
  <ThemeProvider value={customTheme}>
    <App />
  </ThemeProvider>
);