Fix code selection background colors

[dipamsen]

Fixes #1742

Changes:

• Define background colors to be shown when code is selected (For light and dark theme, they were already defined, but not used properly. For high contrast mode, the background color selected is WCAG AA compliant.)

• Properly override CodeMirror defaults corresponding to the following CSS styles defined by codemirror.css

  .CodeMirror-selected { background: #d9d9d9; }
  .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
  .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

Comparison (High Contrast Mode):

Before	After

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[Harshit-7373]

@dipamsen I feel that the issue you have solved requires some discussion about how it should look.

@raclim , Please share your thoughts on this.

[dipamsen]

@Harshit-7373 I have just used the colors that were already defined in the code to be background colors for selection, and used them to override the corresponding CodeMirror CSS properties.

Design wise, I have only chosen one new color (from the predefined color variables) which is the background color for selection in the high contrast theme. I am open to changing it if required, upon further discussion.

[raclim]

Yes, I think the discussion does illustrate that we probably want the highlight color to be a predefined scss variable that we're already using within the editor. (Pasting in the referenced comment below.)

I also think it makes sense to use one of the variations of gray that are used in the theme rather than strong colors like pink and yellow, as that's more common in the context of text highlight colors.

Since this change is pretty small and contained, I feel like what we have a good idea of what we want the end result to look like, which is to have an appropriate contrast between the text and the highlight. I think this feels okay for me, and looks good in the Dark contrast mode as well. Thanks so much for your work on this!