Learn how to use and customize themes in Dial AI using Fluent UI 9’s theme provider.
Dial AI leverages Fluent UI 9’s theme provider to manage and customize application colors. You can refer to their documentation for more details.
There are two main ways to adjust the theme in Dial AI:
By understanding these options, you can align the look and feel of Dial AI’s interface with your brand.
A basic theme involves creating a color palette centered around a primary brand color. This primarily affects:
Other UI colors remain default, giving the interface a brand identity without overcomplicating the design.
To create a basic theme you must generate a palette and then apply the theme.
Note: The 80
key in the palette represents the primary brand color that influences the rest of the theme.
An efficient way to generate a new palette is to use a tool like Chat GPT. Provide an example palette (such as the one above) and your new primary color. The AI can then produce a coordinated set of colors.
After receiving a generated palette, you can apply it.
Once you have your palette, you’ll need to apply it to the tenant. Themes are applied per tenant, so you must include the tenant identifier in the request headers.
X-Organization-Id: YOUR_TENANT_ID
Authorization: YOUR_AUTH_TOKEN
Example curl Request:
Advanced theming gives you complete control over every color variable in the UI. This option includes all the capabilities of the Basic Theme approach, but allows you to fine-tune every color for both light and dark modes. This ensures a fully customized and accessible design that perfectly matches your brand and user experience goals.
Important Consideration: Modifying these values can introduce accessibility challenges. Fluent UI 9’s default themes are designed for optimal contrast and readability. Always review changes to ensure they meet accessibility standards (e.g., WCAG guidelines).
If you don’t need to customize every color, start with these commonly used variables. Adjusting them will have the most noticeable effect on the overall look and feel:
For full control, you can manually specify every Fluent UI 9 theme variable. This approach is time-consuming but ensures a meticulously tailored UI, allowing you to account for both light and dark modes individually.
Tip: If a variable for a given mode (light/dark) is not set, it falls back to the default value, ensuring that unmodified parts of the theme remain stable.
For a complete list of variables:* Visit the Fluent UI 9 documentation.
Below is an example of applying an advanced theme that sets both brand colors and some additional variables for light and dark modes.
Learn how to use and customize themes in Dial AI using Fluent UI 9’s theme provider.
Dial AI leverages Fluent UI 9’s theme provider to manage and customize application colors. You can refer to their documentation for more details.
There are two main ways to adjust the theme in Dial AI:
By understanding these options, you can align the look and feel of Dial AI’s interface with your brand.
A basic theme involves creating a color palette centered around a primary brand color. This primarily affects:
Other UI colors remain default, giving the interface a brand identity without overcomplicating the design.
To create a basic theme you must generate a palette and then apply the theme.
Note: The 80
key in the palette represents the primary brand color that influences the rest of the theme.
An efficient way to generate a new palette is to use a tool like Chat GPT. Provide an example palette (such as the one above) and your new primary color. The AI can then produce a coordinated set of colors.
After receiving a generated palette, you can apply it.
Once you have your palette, you’ll need to apply it to the tenant. Themes are applied per tenant, so you must include the tenant identifier in the request headers.
X-Organization-Id: YOUR_TENANT_ID
Authorization: YOUR_AUTH_TOKEN
Example curl Request:
Advanced theming gives you complete control over every color variable in the UI. This option includes all the capabilities of the Basic Theme approach, but allows you to fine-tune every color for both light and dark modes. This ensures a fully customized and accessible design that perfectly matches your brand and user experience goals.
Important Consideration: Modifying these values can introduce accessibility challenges. Fluent UI 9’s default themes are designed for optimal contrast and readability. Always review changes to ensure they meet accessibility standards (e.g., WCAG guidelines).
If you don’t need to customize every color, start with these commonly used variables. Adjusting them will have the most noticeable effect on the overall look and feel:
For full control, you can manually specify every Fluent UI 9 theme variable. This approach is time-consuming but ensures a meticulously tailored UI, allowing you to account for both light and dark modes individually.
Tip: If a variable for a given mode (light/dark) is not set, it falls back to the default value, ensuring that unmodified parts of the theme remain stable.
For a complete list of variables:* Visit the Fluent UI 9 documentation.
Below is an example of applying an advanced theme that sets both brand colors and some additional variables for light and dark modes.