Fish Trophy

chipx86 got a fish trophy!

Fish Trophy

Add dark and light mode support for CodeMirror and text fields.

Review Request #13731 — Created April 15, 2024 and submitted

Information

Review Board
release-7.x

Reviewers

This updates CodeMirror and textareas inside of the Text Editor
component to work in both light and dark modes.

Light mode appears the same as before, but uses Ink's CSS properties for
inputs as a base, and uses a custom selection color of light blue.

Dark mode uses a dark cool grey background, white text, and a dark
violet selection color.

These colors may be tweaked over time in Ink.

The formatting toolbar has also been tweaked to be less noisy on dark
mode. We now use a simple, slight background instead of the Primary
button color.

We have a number of places where we try to set input and CodeMirror
styles, but these really should be considered legacy. For now, these
are only being set within the rb-c-text-editor component. Any
site-wide defaults for input styling will be phased out in favor of a
the "auto" theme in Ink, as those get added there.

Tested that text, cursors, and selections are visible with good contrast
in light and dark modes.

There's still work to be done for syntax highlighting.

Summary ID
Add dark and light mode support for CodeMirror and text fields.
This updates CodeMirror and textareas inside of the Text Editor component to work in both light and dark modes. Light mode appears the same as before, but uses Ink's CSS properties for inputs as a base, and uses a custom selection color of light blue. Dark mode uses a dark cool grey background, white text, and a dark violet selection color. These colors may be tweaked over time in Ink. We have a number of places where we try to set input and CodeMirror styles, but these really should be considered legacy. For now, theses are only being set within the `rb-c-text-editor` component. Any site-wide defaults for input styling will be phased out in favor of a the "auto" theme in Ink, as those get added there.
94fc30378dfa16be34cd2247345d0e1f523fc82a

Description From Last Updated

Typo in description: theses -> these

daviddavid
david
  1. 
      
  2. Show all issues

    Typo in description: theses -> these

  3. 
      
maubin
  1. Ship It!
  2. 
      
chipx86
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-7.x (f9b5d46)