Apply App or Intranet Theme to Your Custom Widget

Learn how to apply the Staffbase App or Intranet theme to your custom widget.

Employee App
Front Door Intranet

Aligning your custom widget to the style and theme of your App or Intranet gives brand consistency and your users the feeling that your custom widget is a part of their app and intranet. In this tutorial, you will learn how to align your custom widget to the same color scheme used in your App or Intranet.

This tutorial is for advanced developers.


You must have already created a custom widget before proceeding with this tutorial.

On completing this tutorial, you will be familiar with the properties and functions required to align with the text and the background color of your Staffbase App or Intranet.

  1. Pass the widget API element as a property to your custom widget component.
const factory = (Base, _widgetApi) => {
  return class CustomBlock extends BaseBlockClass implements BaseBlock {
    private _root: ReactDOM.Root | null = null;


    constructor() {
      super();
    }
    ...
    public renderBlock(container: HTMLElement): void {
      this._root ??= ReactDOM.createRoot(container);
      this._root.render(<CustomWidget {...this.props} widgetApi={_widgetApi} />);
    }
    ...
  };
};

For more information on branding, read branding for Staffbase App / Intranet.

  1. Apply the text and background color of the Staffbase App / Intranet to the main div element of your custom widget.

As this tutorial is designed to help you get started applying theme of your app or intranet, only changing text and background color is shown here. You can use this as a base and customize your widget further.

import React, { useEffect, useState, ReactElement } from "react";
import { WidgetApi, ColorTheme } from "widget-sdk";


export interface CustomWidgetProps extends BlockAttributes {
  widgetApi: WidgetApi;
}


export const CustomWidget = ({ widgetApi }: CustomWidgetProps): ReactElement => {


  const [theme, setTheme] = useState<ColorTheme | null>(null);


  useEffect(() => {
    setTheme(widgetApi.getLegacyAppTheme());
  }, []);


  return <>
    <div style={{
      color: theme?.textColor,
      backgroundColor: theme?.bgColor,
      padding: "20px"
    }}>
      <div>Your widget content</div>
    </div>
  </>
};

You have applied Staffbase App or Intranet text and background color to your custom widget.