chipx86 got a fish trophy!
Add dark and light mode support for CodeMirror and text fields.
Review Request #13731 — Created April 15, 2024 and submitted — Latest diff uploaded
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 therb-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.