New `themeConfig` property in the context of view apps

You may have noticed something new in the context of all view-based app features (or you can check it out here)…

We recently added the themeConfig property to provide insight into the current custom theme applied within the monday.com platform. This information enables you to align your app’s color scheme with that of the platform’s custom theme.

Using the ThemeProvider in our Vibe design system, you can maintain visual coherence with the platform and provide an overall better user experience!

{
  "themeConfig": { // defines the color scheme and styling configuration for the app, may be "undefined" if the default theme is used
    "name": "crm-product-theme", 
    "colors": {
      "light": {
        "primary-color": "#007f9b",
        "primary-hover-color": "#006278",
        "primary-selected-color": "#bee3e8",
        "primary-selected-hover-color": "#d4ebef",
        "brand-colors": {
          "brand-color": "#007f9b",
          "brand-hover-color": "#006278",
          "text-color-on-brand": "#ffffff"
        }
      },
      "dark": {
        "primary-color": "#007f9b",
        "primary-hover-color": "#006278",
        "primary-selected-color": "#004858",
        "primary-selected-hover-color": "#003844",
        "brand-colors": {
          "brand-color": "#007f9b",
          "brand-hover-color": "#006278",
          "text-color-on-brand": "#ffffff"
        }
      },
      "black": {
        "primary-color": "#007f9b",
        "primary-hover-color": "#006278",
        "primary-selected-color": "#004858",
        "primary-selected-hover-color": "#003844",
        "brand-colors": {
          "brand-color": "#007f9b",
          "brand-hover-color": "#006278",
          "text-color-on-brand": "#ffffff"
        }
      }
    }
  },
  "boardId": 4213911112, // unique board ID 
  "boardIds": [4213911112], // list of connected boards
  "boardViewId": 122234064, // unique board view ID
  "viewMode": "fullScreen", // or "split" or "widget"
  "instanceId": 122234064, // unique instance ID for the feature on the board
  "instanceType": "board_view", // app feature type
  "workspaceId": 2581779,
  "theme": "light", // or "dark" or "black"
  "account": { "id": "1233" },
  "user": {
    "id": "28659824",
    "isAdmin": false, // or true
    "isGuest": false, // or true
    "isViewOnly": false, // or true
    "countryCode": "IL",
    "currentLanguage": "en",
    "timeFormat": "12H", // or "24H" 
    "timeZoneOffset": 2 // timezone offset based on GMT
  },
  "region": "use1", // availability zone ID
  "app": { "id": 10089476, "clientId": "78643ruyagduyg743tyr812uygd74" },
  "appVersion": {
    "id": 10124592,
    "name": "context printer",
    "status": "draft",
    "type": "major",
    "versionData": { "major": 1, "minor": 0, "patch": 0, "type": "major" }
  },
  "appFeature": {
    "type": "AppFeatureBoardView",
    "name": "context printer - v1.0.0"
  }
}

Thanks for this! If I see context of { themeConfig: undefined, theme: "dark", ...} I presume that just means there’s no custom theme applied at the moment.

I’m not too sure how to use ThemeProvider in that scenario though, in order to get Vibe to play with the dark theme. Do you know what props you’d expect to pass to ThemeProvider with such a context in order to get Vibe components to adapt to the current system theme?

Hi @danlester,

Undefined = default theme! :slight_smile:

And working on adding this to the docs, but in the mean time, I hope this code sample is helpful!

import mondaySdk from "monday-sdk-js";

const monday = mondaySdk();

export const useGetContext = () => {
  const [context, setContext] = useState({});


  useEffect(() => {
    monday.listen("context", (res) => {
      setContext((previousContext) =>
        isMatch(previousContext, res.data) ? previousContext : res.data
      );
    });
  }, []);


  return context;
};

const AppWrapper = () => {
  const context = useGetContext();

  return (
    <Flex
      id="main"
      className={cx(context.theme + "-app-theme", "main")}
    >
      <ThemeProvider theme={context.themeConfig}>
        {/* Your app components go here */}
        <App />
      </ThemeProvider>
    </Flex>
  );
};

Best,
Rachel

Thanks for this - very helpful.

I’d ended up with something similar from playing around and some inspection of the source code:

<ThemeProvider theme={context?.theme} themeClassSpecifier={`${context?.theme || "default"}-app-theme`}>

This does seem to do the trick, but wonder if I’ve misunderstood what themeClassSpecifier really does?