Determine current theme

Forge
1

Hi all,
in order to integrate a 3. party component, I should know if the current theme is dark or light.

I don’t know if there is a way to determine the current status!

BR, Franz

1 Like
2

Hi @DevelopMgr. Great question. Check out the docs on useProductContext here https://developer.atlassian.com/platform/forge/ui-kit/hooks/use-product-context.

What you’re looking for is theme.colorMode which will return light or dark.

Here’s an example:

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Text, useProductContext } from '@forge/react';

const App = () => {
  const context = useProductContext();

  useEffect(() => {
    if (context) {
      console.log("Echo theme.colorMode in console log: " + context.theme.colorMode);
    }
  }, [context]);

  return (
    <>
      <Text>theme.colorMode: {context?.theme.colorMode}</Text>
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Also, be sure to check out Design Tokens and Theming in the Forge docs.

2 Likes
3

Thanks @nmansilla for your help!

I had looked in Design Tokens and Theming for clues to determine this value - but was unsuccessful :wink: