Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.activeviam.com/llms.txt

Use this file to discover all available pages before exploring further.

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

​
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.
The key of your theme is up to you, it does not have to be "custom".

​
Use a custom theme

Once registered, your custom theme appears in the Settings popup alongside the built-in Light and Dark themes and can be selected from there. You can also set its key as your theme setting. See Settings.

​
Custom theme thumbnail

To provide a preview image for your theme in the Settings popup, add a PNG file named after your theme key to the public/ folder of your project: 
{themeKey}-theme.png
For example, for a theme registered as "custom", the file should be named custom-theme.png.
The image is rendered at 160×86px. You should provide it at a higher resolution (the built-in thumbnails are around 512×275px).

​
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>
);