Dark Theme support for RichText

[nbelyh]

Category

[x] Enhancement

[ ] Bug

[x] Question

Version

Please specify what version of the library you are using: [ 1.20 ]

Expected / Desired Behavior / Question

If you select "Dark" theme type and use rich text edit, the defaults make text unreadable. Basically, if you just enter the text (using the "standard" theme) and then switch the theme to "Dark", the content becomes like this. The text is almost invisible.

It would be really nice if the RichText defaults respected the default theme colors. As it's a wrapper around quill, so the defaults on the top DIV (ql-editor) needs to be changed to respect the basic theme color/background.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[nbelyh]

More information: looks like the RichText it just applies ql-snow Quill theme and completely ignores whatever is selected in SharePoint (i.e. it is not theme-aware). A minimalistic workaround could be:

.richtextWrap {
  position: "relative"; /* fix the toolbar position */
  :global(.ql-editor) { /* fix the default theme color */
    blockquote, div, h2, h3, h4, ol, p, ul {
      color: "[theme:black, default:black]";
    }
  }
}

<div className={styles.richtextWrap} >
  <RichText ... />
</div>

[AJIXuMuK]

Hi @nbelyh,
There are plans to improve controls to support themes and section backgrounds.
We'll work on that closer to IE11 retirement date.

[dunlapm]

Hi @nbelyh, There are plans to improve controls to support themes and section backgrounds. We'll work on that closer to IE11 retirement date.

Is there any kind of timeline for this? This bug makes the control nearly unusable on sites with dark backgrounds, and also affects the side panel text.

[nbelyh]

@dunlapm I have fixed that for my project (look at the above scss fragment for example), but this whole thing (proper theme support for spfx controls library, especially this control) will IMHO require much more effort. I have tried that, but as far as I remember, "we need to go deeper" and the problem lies actually down in the SPFx build tools, that are not configured to support styles properly (the @microsoft/load-themed-styles package). So the theming that comes from FluentUI works, but direct definitions using themes don't. But I may be mistaking or forgetting something, it was about 1.5 years ago.

[nbelyh]

Created PR to fix the issue

[joelfmrodrigues]

New release just published, closing