Managing themes

Next Identity includes Themes as a core feature, empowering you to create and personalize visual styles that align with your brand identity. Customize design elements such as color schemes, typography, component styling, and more to support branding strategies like multi-branding, unbranding, or third-party branding. Themes help accelerate time-to-market by providing ready-to-use branding configurations.

Themes are flexible, supporting diverse branding needs while ensuring standardized, scalable deployment across multiple environments. Each theme can be configured with:

- Color Palette: Primary, secondary, accent colors, backgrounds, and text colors

- Typography: Font families, sizes, weights, and line heights

- Component Styling: Buttons, inputs, cards, modals, and navigation elements

- Background Settings: Custom properties and background configurations

- Email Templates: Custom email designs with logos, colors, and styling

- File Assets: Logos, images, and other theme-related files

Next Identity provides a Default Theme that applies when no specific theme is configured for an application. The default theme ensures a consistent, professional appearance across all user interfaces, even without custom branding. You can use the default theme as a starting point when creating new themes, or create themes from scratch.

To manage Themes:

1. Navigate to "Themes" in the left menu of the Next Identity Console.

2. Select an environment from the environment tabs (Development, Production, etc.).

3. View all themes available in the selected environment.

Note: Access to this feature is role-based. Users should refer to the "Roles and Permissions" page for more details.

Themes are managed per environment, allowing you to:

• Create and test themes in Development environments

• Deploy approved themes to Production environments

• Compare themes between environments

• Propagate theme changes from one environment to another

Users can create, edit, duplicate, delete, and associate themes with applications directly from the Next Identity Console. Additional features include:

• Live Preview: Real-time preview of theme changes as you edit

• Theme Propagation: Sync theme changes from Development to Production environments

• File Management: Upload and manage theme assets (logos, images)

• Permission Controls: Role-based access with environment-specific restrictions

1. On the "Themes Management Screen", select "New Theme".

2. Enter a descriptive "Theme Name" that reflects its purpose.

3. (Optional) Enter a "Description" to provide additional context about the theme.

4. Use the "Theme Configuration Panel" to configure the elements.

5. Use the "Live Preview" panel to see your changes in real-time.

6. Once configured, select "Save" to finalize and return to the "Themes Management Screen".

Note: Themes are created in both Development and Production environments simultaneously. You can edit them separately in each environment after creation.

The theme configuration panel is organized into collapsible sections:

• Typography: Font families, sizes, weights, and line heights

• Colors: Color palette and branding colors

• Components: Button, input, card, modal, and navigation styling

• Background: Custom properties and background settings

• Email: Email template configuration

• Files: Theme asset uploads (logos, images)

1. In the "Themes Management Screen", locate the desired theme and select the "Edit icon" (pencil).

2. Modify the theme's elements in the "Theme Configuration Panel".

3. Use the "Live Preview" to see your changes in real-time.

4. After adjustments, select "Save" to apply changes and return to the "Themes Management Screen".

Note: Changes are saved immediately and affect all applications using the theme.

You can preview a theme without editing by:

1. Selecting the "Preview icon" (eye) on any theme card.

2. The theme will open in preview mode (read-only) where you can view all configurations but cannot make changes.

1. Navigate to the desired Application page.

2. Select the "Experience" tab.

3. In the "Theme" dropdown, select the theme you want to use.

4. The theme will be applied to all user journeys for that application in the selected environment.

Note: Each application can have a different theme configured for each environment (Development, Production, etc.).

1. In the "Themes Management Screen", locate the theme to duplicate.

2. Select the "Duplicate icon" (copy).

3. A copy of the theme will be created with the name "[Original Name] (Copy)".

4. The duplicated theme can then be edited as required.

Note: Duplicated themes are created in the same environment as the original.

1. In the "Themes Management Screen", locate the theme to delete.

2. Select the "Delete icon" (trash can).

3. Confirm the deletion in the dialog box.

Important Notes:

• Themes can only be deleted if they have no associated applications.

• If applications are linked, a warning will prompt you to reassign or remove those applications first. This policy ensures that all applications always have an active theme, maintaining branding consistency.

Theme propagation allows you to sync theme changes from one environment to another, typically from Development to Production.

1. Navigate to the "Themes Management Screen".

2. In Production environments, if theme differences exist, a "Sync Banner" will appear at the top of the themes list.

3. Select the option to sync themes.

Note: Theme propagation is only available to specific roles.

1. Select the target environment you want to propagate themes to.

2. Review the "Theme Differences" panel to see what will change.

3. Select the specific changes you want to propagate.

4. Review the "Propagation Summary" before execution.

5. Enter an "Audit Comment" describing the changes.

6. Select "Execute Propagation" to apply the changes.

Note: Propagation operations are logged for audit purposes and cannot be undone. Always review changes carefully before executing.

• Use descriptive theme names that clearly indicate their purpose (e.g., "Brand A - Production Theme").

• Add descriptions to provide context about when and why to use each theme.

• Organize themes by brand, environment, or use case.

1. Create themes in Development environments first.

2. Test themes thoroughly using the live preview feature.

3. Associate themes with test applications to verify appearance.

4. Propagate approved themes to Production environments.

5. Monitor theme usage across applications.

• Upload high-quality logo files in appropriate formats (SVG preferred for logos).

• Keep file sizes reasonable to ensure fast loading times.

• Always test theme changes in Development before propagating to Production.

• Review all changes in the propagation summary before executing.

• Use descriptive audit comments when propagating changes.

• Keep backups of production themes before major changes.

• Verify the theme is associated with the application in the correct environment.

• Check that the application is using the correct environment configuration.

• Clear your browser cache and refresh the page.

• Verify you're viewing the correct environment.

• Check that changes were saved successfully.

• Verify your role has the required permissions for the operation.

• Contact your administrator if you need additional permissions.

• Verify both source and target environments are accessible.

• Check that themes exist in both environments.

• Review error messages for specific guidance.

If you have questions or need additional help with managing Themes, please reach out to your Next Identity Consultant or contact the support team for expert guidance.