feat(CodeEditor): use custom PatternFly monaco theme

[logonoff]

What: Closes #11506

• Ports the Monaco theme from CONSOLE-4407, CONSOLE-4409: Update monaco and YAML language server, use PF6 CodeEditor openshift/console#14663 to the PF CodeEditor

Note there should be some additional CSS in PatternFly to make this look better (so that the margin around the CodeEditor matches the monaco background color), but I'm not sure of the best way to implement it:

.pf-v6-theme-dark {
  .pf-v6-c-code-editor:not(.pf-m-read-only) {
      --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-t--color--gray--90);
      --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--color--gray--90);
  }
}

I tried looking into using pf-t--global--background--color--primary--default, but it doesn't provide enough contrast in dark mode. Meanwhile, pf-t--global--background--color--secondary--default doesn't provide enough contrast in light mode.

[patternfly-build]

Preview: https://patternfly-react-pr-11575.surge.sh

A11y report: https://patternfly-react-pr-11575-a11y.surge.sh

[andrew-ronaldson]

This is good. I tried to do a subtle rounding of the corners to match the container but it crops off too much so we can leave that for now

[thatblindgeye]

Just needs a rebase

[logonoff]

what was the verdict on adding the additional CSS so that the editor background colour matches the margin?

[thatblindgeye]

@logonoff are you referring to the margin color shown below, where the background color surrounding the code text/of the "JAVASCRIPT" tab is lighter than the background color of the element containing the code "Some exam"?

[logonoff]

@logonoff are you referring to the margin color shown below, where the background color surrounding the code text/of the "JAVASCRIPT" tab is lighter than the background color of the element containing the code "Some exam"?

yeah. in OCP I added some CSS so that these background colours match:

// match the token in theme.ts. it already matches for light theme
.pf-v6-theme-dark {
  .co-code-editor:not(.pf-m-read-only) {
      --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-t--color--gray--90);
      --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--color--gray--90);
  }
}

do you think it'd be possible (or even desirable) to include this in the base PatternFly styles? the issue is that there's no global semantic token that exists which has gray--90 in dark mode but white in light mode

[mcoker]

I noticed some syntax color changes in light theme that didn't seem right, but looks like there might be a bug? Not sure if it's a bug in the code editor or just a workspace issue.

When you first load the page, the syntax highlighting looks money. But if you toggle the code editor dark theme on and off, syntax highlighting changes to colors that are not accessible.

Apr-14-2025.13-41-54.mov

For simple var declarations like the screenshot below

• let is #21134d (a very dark blue)
• name is black
• "John" is #003366 (another dark blue)

[mcoker]

🚀

[dlabaj]

closing request. Currently it doesn't support light mod a11y correctly, and there needs to be a more indepth conversation on how to implement this.

[logonoff]

closing request. Currently it doesn't support light mod a11y correctly, and there needs to be a more indepth conversation on how to implement this.

hey! which a11y issues did you spot with the light mode? these need to be fixed as OCP uses this exact monaco theme

[mcoker]

@logonoff AFAIK the only issue was the syntax highlighting in light theme. I included a small snippet at the bottom of this comment - #11575 (review). It appears like we lost most of the light theme syntax highlighting, but technically it looks like the colors just changed and don't have enough contrast to really be distinguishable from one another.

[logonoff]

ah:

when choosing the colours I decided to lean more towards having 7:1 levels to contrast between each token and the background colour. however I guess this made the contrast between each colour not great..

[mcoker]

@logonoff we maaayyy be able to get design feedback, but if I were taking a stab at it, I might just look at the default syntax highlighting that comes from Monaco, then pick the closest to those colors using our tokens. However, instead of using color palette tokens, I might use these "nonstatus" tokens we have for various colors - https://github.com/patternfly/patternfly/blob/a0dcdd6176f0a05d3dfc4ec198c1275c01b2ca61/src/patternfly/base/tokens/tokens-default.scss#L389-L415. The --default is usually the "default" (duh! haha) version of that color and --hover/clicked is a more pronounced version of the color (usually darker in light theme and lighter in dark theme).

IMO you could take a stab at it that way (or if you had another idea), and we can ask design to review, or I'm happy to hit up design first and see if they have suggestions - just lemme know!