Gadget background: solid color issue in dark mode only

Jira Development Jira Cloud
, ,
1

I have noticed that in dark mode, my custom UI dashboard gadget get some sort of weird dark color behind rendered fields; this is not apparent in light mode.

in my index.js I have the following:

import { view } from '@forge/bridge';
import { setGlobalTheme } from '@atlaskit/tokens';
import '@atlaskit/css-reset';

setGlobalTheme({ light: 'light', dark: 'dark', colorMode: 'auto' });
view.theme.enable();

This works great except for the weird background (see below) I included a vanilla gadget to show the difference.

image
image853×513 32.3 KB

Has anyone had this issue before?

2

I was able to fix this by putting all content within a <div> with the following style:

backgroundColor: token('elevation.surface.raised')

function Edit() {
  const onSubmit = (formData) => view.submit(formData);
  return (
    <div style={{backgroundColor: token('elevation.surface.raised'),}}>
      <Form onSubmit={onSubmit}>
              //Form code
      </Form>
    </div>
  );
}

I also had to set this within my index.html

<body style="background-Color: var(--ds-surface-raised)">
//code
</body>

image