What is a theme?
A theme in ArcGIS Experience Builder allows you to customize the appearance and style of your 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.
You create a new theme to:
- Match your organization's brand guidelines
- Create a unique visual identity for your applications
- Ensure consistent styling across multiple experiences
- Support both light and dark mode variations
How themes work
Experience Builder provides a default theme that includes configurable theme variables and style modules for Jimu UI base components. These variables and modules generate CSS styles at runtime, which are applied to components throughout your application.
The Theme Design System uses a three-layer architecture:
- Source layer: Defines base colors (brand, neutral, functional)
- Reference layer: Auto-generates color palettes and typography
- System layer: Provides semantic styling for components
A theme consists of the following parts:
| Part | Description |
|---|---|
| Theme definition | Includes the manifest, translation files and theme thumbnail |
| Theme variable overrides | Defined in variables.json to customize properties such as colors, shadows, and shapes |
| Style overrides | Written in Sass (.scss) or TypeScript (.ts) files |
| Assets | Images, icons, and fonts that are used in the theme. Create a folder named assets in your theme directory to store these files |
Theme development options
When creating a new theme, there are two main development options:
- Customize theme options is the recommended option to create a new theme. You configure colors, typography, shapes, shadows, and other variables in
variables.json. This approach is simple to maintain and supports light or dark modes automatically. Learn more here. - Customize component styles is the advanced option to create a new theme. You write global CSS (SCSS) or scoped CSS-in-JS in
style.scssorstyle.tsto override base component styles with full control and access to theme variables and component state. Learn more here.
What's next?
Learn about the different theme development options and how to create and customize themes: