---
title: Theming Activate
slug: theming-activate
docTags: 
createdAt: 2025-07-17T03:19:54.738Z
---

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](https://bareynol.github.io/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](https://material.io/inline-tools/color/)**
   Use this to generate a color palette based on your chosen primary color. 

You can view the default MUI theme [here](https://mui.com/material-ui/customization/default-theme/)

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:

:::BlockQuote
C:\Program Files\Activate\Instances\\\[INSTANCENAME]\wwwroot\ClientApp\build\images
:::

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:

:::BlockQuote
@import "https\://fonts.googleapis.com/css2?family=Exo+2\&display=swap";
:::

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:

:::BlockQuote
style-src 'self' 'unsafe-inline' https\://fonts.googleapis.com;
:::

b. Local Fonts

Copy your font files into:

:::BlockQuote
\[Program Files]\Activate\Instances\\\[INSTANCENAME]\wwwroot\style
:::

Then define them in custom.less:

:::BlockQuote
@font-face \{
  font-family: 'Exo 2';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('Exo2.woff2');
}
:::

### 2. Update the Theme to Use the New Font

1. Navigate to:
    //Resources/Configuration/Web/Theme 
2. Update the Material UI theme JSON to include your font family.
    Always define fallback fonts for broader browser support. 

Example:

:::BlockQuote
"light": \{
  "typography": \{
    "fontFamily": "'Exo 2','Roboto','Segoe UI',Arial"
  },
  "palette": \{
    "mode": "light",
    "icon": \{ "main": "#3D77B1" },
    "title": \{ "main": "#000" },
    "primary": \{ "main": "#16499a" },
    "secondary": \{ "main": "#cc6600" }
  }
},
"dark": \{
  "typography": \{
    "fontFamily": "'Exo 2','Roboto','Segoe UI',Arial"
  },
  "palette": \{
    "mode": "dark",
    "icon": \{ "main": "white" },
    "title": \{ "main": "#16499a" },
    "primary": \{ "main": "#16499a" },
    "secondary": \{ "main": "#cc6600" }
  }
}
:::