Your guide for configuring multi-theme support on your community through the GraphQL API.
Aurora includes support for multiple themes used across a community instance. This enables you to design custom experiences for your community depending on which place members interact with.
For instance, a video game studio's community could customize the categories and boards for each game with distinct color schemes and branding that reflect the unique style and personality of each title, creating a cohesive and immersive experience for fans.
Place-based theme scoping allows you to personalize your community by applying unique themes to specific places, such as categories, forums, and blogs. This feature provides greater customization and enables distinct visual identities for different sections of your site.
INFO
Nodes, as they have been referred to in Communities Classic, are referred to as places in Aurora. Much of the API and backend code still refers to nodes. For the purpose of this guide, the two names should be considered interchangeable.
Understanding the theme inheritance mechanism
If a place does not have a theme assigned, it inherits the theme from the closest parent place with a scoped theme. If no parent place has a scoped theme, the community default theme is applied.
The diagram above demonstrates that any place without a theme scoped to it inherits the theme that is scoped to its ancestor place(s). If no ancestor place has a theme scoped to it, the default theme is applied.
This inheritance also applies to child pages, such as “Create Post,” “View Post,” and similar pages.
INFO
Assigning a theme to a place replaces any existing theme-to-place mapping.
How to Scope a Theme to a Place
The createOrUpdateTheme
GraphQL mutation allows you to assign a theme to specific places.
Key Parameters
This mutation includes three parameters you can use to identify the theme, the core places (referred to in the API as Nodes) you want it scoped to, and whether the theme should be set as the community's default.
Parameter | Description | Required? |
---|---|---|
themeInput |
Information about the theme. The only required field is the theme ID. | Yes |
coreNodeIds |
Array of node IDs to scope the theme to. Throws an error if any node does not exist. | No |
setAsDefault |
Optional boolean to set the theme as the community’s default theme. Defaults to false. | No |
Mutation Example
The following example assigns the theme themeA
to the category:category2
node and sets it as the community’s default theme:
There are two points to keep in mind whenever you use this mutation to scope a theme:
- Scoping a theme replaces all existing places previously tied to the theme.
- Setting a theme as default (
setAsDefault = true
) has the same effect as adding the community place to thecoreNodeIds
array.
The following happens in the background when you execute the createOrUpdateTheme
mutation:
- Each place in the
coreNodeIds
array is validated for existence. - The
scopes.theme
setting is updated for each place, associating it with the provided theme ID.
Best practices and recommendations
Here are some tips to help you get the most out of Aurora's multi-theme support.
- Use descriptive theme IDs for easier management and troubleshooting.
- Ensure child places inherit themes correctly by reviewing the parent place's scoped theme.
Troubleshooting
Issue | Cause | Solution |
---|---|---|
Node ID not found. | Invalid node identifier in coreNodeIds |
Verify the node IDs prior to running the mutation. |
Unexpected theme inheritance behavior. | No theme scoped to the place (category, board, etc.) | Scope a theme to the place either explicitly or to a parent place. |
Place-based theme scoping enhances the personalization of your community site by allowing unique themes for different sections. By understanding inheritance rules and leveraging the createOrUpdateTheme
mutation, you can create a visually engaging experience tailored to your community’s needs.
For further assistance, refer to the API documentation.
ATLAS
Comments