Theming Activate
Activate Theme and UI Customization
Activate is built on the Material UI (MUI) component library. The application theme can be customized to align with your organization’s branding and design preferences. Full details on theming are available at: 🔗 https://mui.com/material-ui/customization/theming/
Theme Design Tools
The community provides several helpful tools for designing and previewing MUI themes:
- mui-theme-creator A visual tool to design and customize MUI themes. It includes sample layouts that demonstrate how your chosen theme affects various components.
- Material Palette Generator Use this to generate a color palette based on your chosen primary color.
You can view the default MUI theme here
The Activate theme configuration is stored in: //Resources/Configuration/Web/Theme/Theme.json This file can be customized using the above tools and documentation.
Custom LESS
Custom.less can be used to define additional CSS classes if required. However, it does not have access to the MUI theme data and should only be used sparingly. Most styling adjustments can be completed using properties such as margin, padding, color, and backgroundColor directly on panels.
Icons
Activate uses SVG icons by default. These icons are scalable, theme-aware (automatically colored and resized), and support overlays without requiring separate image files.
You can still use custom PNG or GIF icons if required. Note that these will not dynamically adjust to theme colors. They should be placed in:
and referenced using /images/XXXX.png.
A wide range of open-source icons are also included and can be browsed at: 🔗 https://icon-sets.iconify.design/
Available icon sets include:
- Material Design Icons (mdi: prefix) – ~7,000 icons
- Material Symbols (material-symbols: prefix) – ~8,000 icons
- Google Material UI Icons (ic: prefix) – ~10,000 icons
- Fluent Design Icons (fluent: prefix) – ~12,000 icons
- Font Awesome 6 (fa6: prefix) – ~1,500 icons
To use an icon, reference it with its prefix and name. For example: ic:outline-person-3 displays an outlined “person” icon from the Material UI set.
Fonts
The default font used in Activate is Roboto. You can use custom fonts by following these steps. Supported formats: .ttf, .woff, and .woff2.
Activate’s typography expects the following weights: 300, 400, 500, and 700. Ensure these are available for any new font you use.
1. Define and Load the Font in CSS
Custom fonts can be loaded via custom.css, either from an external source or locally.
a. External Fonts
To import a Google Font, use the @import statement:
By default, this may be blocked by the Content Security Policy (CSP). If so, update the following file to allow stylesheets from Google:
//Resources/Configuration/Web/ContentSecurityPolicy
Add this line under style-src:
b. Local Fonts
Copy your font files into:
Then define them in custom.less:
2. Update the Theme to Use the New Font
- Navigate to: //Resources/Configuration/Web/Theme
- Update the Material UI theme JSON to include your font family. Always define fallback fonts for broader browser support.
Example: