Dark mode in Custom-UI shows unnecessary white box

Forge
,
1

Hi,

I tried a new Custom-UI Forge app as Macro for Confluence in light mode and dark mode.
But I always see a white box beneath the output in dark mode.
This occurs in Chrome, FF and MS Edge.

Any idea what I’m doing wrong?

Thanks!

Output:

Dark Mode-Confluence
Dark Mode-Confluence804×157 2.2 KB

Example Code:
App.js

import React, { useEffect, useState } from "react";
import { view } from "@forge/bridge";

import "./styles.css";

function App() {
  const [theme, setTheme] = useState();

  useEffect(() => {
    view.getContext().then((context) => {
      setTheme(context.theme.colorMode);
    });
  }, []);

  return (
    <div className={theme === "dark" ? "dark-theme" : "light-theme"}>
      <div>Theme: {theme}</div>
      <div>... and other information</div>
    </div>
  );
}

styles.css

.light-theme {
  background-color: white;
  color: black;
}

.dark-theme {
  background-color: #333;
  color: white;
}
2

Try without defining the Theme yourself (if it fits your needs).
The standard colors are defined by the platform.
You can define colors which automatically switch between their light and dark variants using design tokens.

import React, { useEffect, useState } from "react";
import { view } from "@forge/bridge";

function App() {
  view.theme.enable().then()

  return (
      <div>Hello World !</div>
  );
}
3 Likes
3

Thanks Fabien for your quick and great suggestion!

It works and it is much easier!

BR,
Franz

4

Here is how you can implement this for your custom UI using React. The app will render with all the styles (including the design-token-based background) only after the application theme has been initialized:

// index.tsx

import { view } from '@forge/bridge';
import ReactDOM from 'react-dom/client';
import { App } from './app/App';

void view.theme.enable().then(() => {
  const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
  root.render(<App />);
});
1 Like