Dynamic Theme Changes for Asset Listing Page

Question

Is it possible to dynamically alter the theme, including logos, fonts, and styles, on an asset listing page within Sitecore Content Hub? For instance, could selecting a brand filter prompt a shift in the page's style and color scheme according to the chosen brand? Furthermore, would selecting a different brand result in a corresponding change in style?

Using the latest Content Hub version.

Answer 1

You can use external component on Content Hub to achieve the same as below.

import ReactDOM from "react-dom";
import { RelationLoadOption } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/querying/relation-load-option";
import { EntityLoadConfiguration } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/querying/entity-load-configuration";

export default function createExternalRoot(container: HTMLElement) {
  return {
    async render(context: any) {
      var userEntity = await context.client.entities.getAsync(
        context.user.id,
        EntityLoadConfiguration.Full
      );
      var userProfileId = userEntity.getRelation("UserToUserProfile").getId();
      var userProfileEntity = await context.client.entities.getAsync(
        userProfileId,
        EntityLoadConfiguration.Full
      );
      var userProfileTheme = userProfileEntity.getRelation(
        "ThemeToUserProfiles"
      );
      //Id of the theme
      userProfileTheme.setId(12799062);
      await context.client.entities.saveAsync(userProfileEntity);
    },
    unmount() {
      ReactDOM.unmountComponentAtNode(container);
    },
  };
}

In the above snippet, context user profile is read and theme is assigned to the user using ThemeToUserProfiles relation. You can use the same snippet to change the theme on the page according to brand parameter.

Hope this helps!!!