Theme

What is a theme?

A theme in ArcGIS Experience Builder is a systematic approach to customizing the appearance and style of applications. Built on the Jimu framework and the Theme Design System, it provides a structured, customizable, and extensible theming approach that ensures a unified look and feel across your experience.

Themes work by providing configurable theme variables and style modules for Jimu UI base components. Under the hood, style modules read the theme variables and dynamically generate CSS styles at runtime, which are then applied to components.

A typical theme consists of the following parts:

• Theme definition that includes the manifest, translation files, and theme thumbnails.
• Theme variable overrides that are defined in variables.json to customize properties such as colors, shadows, and shapes.
• Style overrides that are written in Sass (.scss) or TypeScript (.ts) files for advanced customization.
• Assets that are images, icons, and fonts stored in an assets folder.

In the app configuration, themes are defined by the theme property which contains the URI reference to the theme applied to the experience. In addition, the theme can be customized in the Theme settings panel.

Why use themes?

Themes provide several key benefits for your Experience Builder applications:

Benefit	Description
Unified look and feel	Ensures consistent visual design across all components
Easy customization	Allows for branding and preference adjustments without code changes
Flexible configuration	Supports theme switching and dynamic styling
Maintainability	Centralized styling makes updates and changes easier

How to use themes

Here are the general steps to work with themes in ArcGIS Experience Builder:

1. Select a theme

To select a theme for your experience, follow these steps:

1. Navigate to the Theme panel in ArcGIS Experience Builder.
2. Browse through the available theme options.
3. Click on a theme to preview how it will look with your content.
4. Select the theme that best matches your design requirements.

2. Customize the theme

To customize the selected theme, follow these steps:

1. In the Theme panel, click on the Customize button for your selected theme.
2. On the Customize Theme page, you can modify the theme properties:
   • Colors: Adjust primary, secondary, and accent colors
   • Typography: Change font families, sizes, and weights
   • Border radius: Adjust the border radius of components
   • Components: Customize button styles, form elements, and other components
3. Use the live preview to see changes in real-time.

3. Apply the theme

When you customize the theme, the changes will be applied in real-time across all pages in your experience.

1. Click Save to save the theme to your experience.
2. Click Preview to see how your experience looks with the new theme.

Custom theme development

For advanced customization, you can create custom themes using the Jimu framework and the theme options. The theme options are structured to allow you to customize the theme properties.

As a developer, you can override the theme variables or components and global styles to customize the theme styles. There are two main methods for customizing theme styles:

• Overriding theme variables (recommended): It involves modifying theme properties through a variables.json file allowing you to customize design elements like colors, typography, and shapes without writing custom CSS.
• Overriding components and global styles: It involves writing custom CSS or CSS-in-JS to achieve more precise control over component styling.

Resources

• To learn more about creating custom themes, go to how to create a theme.
• For detailed theme customization options, refer to customize theme options.
• For advanced component styling, see customize component styles.
• To learn about using custom fonts, refer to using custom fonts in your theme.
• To explore the theme design system and see examples, visit the theme design system documentation.