[Bug] Text highlights and text cursor not visible when using Windows OS-level high-contrast themes

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

The default playground page reproes the issue:
https://microsoft.github.io/monaco-editor/playground.html

The Monaco Editor homepage also reproes the issue:
https://microsoft.github.io/monaco-editor/

The issue happens even in older versions. It doesn't seem like a regression.

Monaco Editor Playground Code

N/A (code-independent)

Reproduction Steps

1. In the Windows OS settings, go to Accessibility -> Contrast themes. Then select any of the high-contrast themes from the dropdown and click Apply.
   
2. Open Monaco Playground or Monaco Homepage. Reload the page just in case.

Actual (Problematic) Behavior

1. Type in one of the editors, and notice that the text cursor is invisible (it's the same color as the background)
2. Try to select some text and notice that the text selection is invisible (it doesn't seem like the text is selected, even when it is)

Expected Behavior

The text cursor and the text selection should be visible

Additional Context

The solution will likely use @media ( forced-colors: active ) { … } and forced-color-adjust: none;.

For fixing the cursor issue, it seems like the following might suffice:

  // OS-level high-contrast mode
  @media (forced-colors: active) {
    // Fix issue where text cursor was invisible (it was the same color as the background)
    .monaco-editor .cursors-layer>.cursor {
      // This prevents OS-level high-contrast mode from overriding the style of this element
      forced-color-adjust: none;
      // Note: CanvasText is a system color: https://www.w3.org/TR/css-color-4/?utm_source=chatgpt.com#css-system-colors
      background-color: CanvasText !important;
      border-color: CanvasText !important;
    }
  }

For the other issue, the highlight issue, maybe something like this would work:
(note on the below selectors: .inline-selected-text only seems to exist when the monaco theme is set to a high-contrast theme)

  // OS-level high-contrast mode
  @media (forced-colors: active) {
    // Fix issue where text selection was invisible (it was the same color as the background)
    // Note: the `.inline-selected-text` element only exists when using Monaco high-contrast themes.
    .monaco-editor .inline-selected-text {
      // This prevents OS-level high-contrast mode from overriding the style of this element
      forced-color-adjust: none;
      // Note: HighlightText and Highlight are system colors: https://www.w3.org/TR/css-color-4/?utm_source=chatgpt.com#css-system-colors
      color: HighlightText !important;
      background: Highlight !important;
    }
  }

Another option is to target .selected-text instead of inline-selected-text, so that this works for non-high-contrast Monaco themes as well, but that would be more involved, because the the OS also seems to force background color below all text, which would mean that the editor text would end up being forced to have a background, which would cove then normal selection rectangle element (which we want to be seen, not occluded). So it would be necessary to do forced-color-adjust: none overrides also to other elements above.

Start by reproducing the issue in the Monaco Playground and Monaco homepage with a Windows OS-level high-contrast theme enabled. Inspect the editor cursor and selection elements, including .cursors-layer > cursor, .inline-selected-text, and .selected-text, and compare their forced-colors behavior. Done means both the text cursor and selected text are visibly distinguishable.