Experience Builder provides a powerful theming system that helps you systematically customize the look and feel of your applications.
The Jimu Theme package is the core library of this system, containing all theme-related APIs and utilities for variable management, style extension, and component-level customization.
Defining styles for components
When styling with emotion-js, you can leverage the Jimu Theme package to reuse variables and styles consistently across components.
Creating styled components with styled
import { styled } from 'jimu-theme'
const StyledButton = styled('button')(({ theme }) => ({
backgroundColor: theme.sys.color.primary.main,
color: theme.sys.color.primary.text,
borderRadius: theme.sys.shape.shape1,
padding: theme.sys.spacing(1, 2),
// ...
}))Accessing theme variables via hook
import { css } from 'jimu-core'
import { useTheme } from 'jimu-theme'
const MyComponent = () => {
const theme = useTheme()
return (
<div css={css({ backgroundColor: theme.sys.color.surface.paper })}>
Hello World
</div>
)
}Accessing theme variables via HOC with
import { withTheme } from 'jimu-theme'
const MyComponent = ({ theme }) => (
<div style={{ backgroundColor: theme.sys.color.surface.paper }}>
Hello World
</div>
)
export default withTheme(MyComponent)Customizing themes
Experience Builder provides a set of default theme variables. You can fully customize a theme by overriding these variables or defining component-specific styles.
Overriding default variables
Add custom theme options in your-theme/variables.json, for example:
{
"src": {
"primary": {
"color": {
"main": "green"
}
}
}
}Defining component-level styles
Beyond variable overrides, you can define custom styles for base components in your-theme/style.ts.
Use the ThemeComponentStyleOptions interface to access style configurations for each component.
// style.ts
import type { ThemeComponentStyleOptions } from 'jimu-theme'
export const Button: ThemeComponentStyleOptions['Button'] = {
root: ({ styleState, theme }) => ({
// custom styles
})
}