How to override dark mode color changes for Forge app without custom UI?

Forge Forge UI Kit and Custom UI
, , , , ,
1

Hello community,

I have a Forge app (NOT custom UI) that creates tickets that contain colors that have meaning, and as such I need to be able to control what they look like in both light and dark mode.

Currently, the colors look like this in light mode (correct):

image
image737×65 1.63 KB

But in dark mode the colors are different (incorrect):

image
image726×58 1.6 KB

I don’t need the colors to be exactly the same in both themes; I do have a different color scheme for dark mode.

Am I able to override the colors for dark mode without using Custom UI? I did some digging and it seems possible for Custom UI, but I have read next to nothing about theming with the simpler UI kit. Do I have any options to control the colors between themes with UI kit?

Thanks for your help.

2

Hi @AnastasiaVanRiet , what component are you using to achieve the above? Could I see a code snippet?

3

Hi @QuocLieu, this is a single row table for which we have a function that returns an object with the colors for each cell

return {
    type: "tableCell",
    content: [
      {
        type: "heading",
        content: [
          {
            type: "text",
            text: `${count}`,
            marks: [
              {
                type: "textColor",
                attrs: {
                  color: "#ffffff"
                }
              },
              {
                type: "strong"
              }
            ]
          }
        ],
        attrs: {
          "level": 2
        }
      }
    ],
    attrs: {
      background: backgroundColor
    }
  };
4

Could I see the JSX code for this row? Is this UI kit 1 or UI kit 2 you’re using?

5

This is UI Kit 2. This table is within the pure Javascript code

function getTable() {
  return {
    type: "table",
    content: [
      {
        type: "tableRow",
        content: [
          countCell(<type A>, counts[<type A>]),
          countCell(<type B>, counts[<type B>]),
          countCell(<type C>, counts[<type C>]),
          countCell(<type D>, counts[<type D>]),
        ]
      }
    ],
    attrs: {
      layout: "default",
      isNumberColumnEnabled: false
    }
  };
}

This is called from a method returning an array of content for the ticket bodies

return [
    <heading object>,
    getTable(),
    <other heading and paragraph objects>
  ]

Which is used to create this document object

  return {
    type: 'doc',
    version: 1,
    content,
  };

Which is used with the create issue API

The JSX returns a response based on this process that looks like this

export function response(
    body,
    statusCode,
    statusText,
    headers = { "Content-Type": ["application/json"] },
) {
  <format body>

  return {
    body,
    headers,
    statusCode,
    statusText,
  };
}

This body in the response is either an error message or a success message like this

{ message: 'event processed', timestamp: Date.now() }
6

For anyone finding this in the future, Atlassian staff confirmed there is no workaround and no way to control the color based on theme with UI Kit 2. This is the bug ticket spawned from this inquiry: https://jira.atlassian.com/browse/JRACLOUD-82917

1 Like