CODEWITHSUNDEEP
javascriptreactjsnext.jsrich-text-editorreact-md-editor
Matt
Matt

Reputation: 41

Having trouble setting dark theme with react-md-editor in NextJS

I have followed the instructions for setting up react-md-editor for NextJS which has gotten the text editor to appear in the application, but I cannot get the text editor to represent a dark theme given the instructions on https://www.npmjs.com/package/next-md-editor

Here is a codesandbox of a given example of how the doc represents themes: codesandbox of light and dark theme

Regardless of whether I have a div with the data-color-mode="dark" props, some sort of container with the prop, or no container at all, the theme is always light for me.

Is there some sort of overriding styling that I am overlooking? I am using Material UI components throughout the app, and I do already have theme provider in the _app.js file, PRIOR to adding this text editor. (could this be the underlying issue? If so, how?) I have created an almost exact working copy of the example in the codesandbox in a separate component and cannot get the theme to change in my application.

line 24 and line 27 are the 'toggles' for dark and light theme. The only part that really makes sense to me are lines 21-32.

I understand that adding a random prop to a random div doesn't magically add style changes like how it is represented here, but what the heck is going on otherwise? From what I can tell, this is all the docs tells me to do. enter image description here

both of the renders are light theme. enter image description here

This is a snippet of where the component containing the text editor is in the parent if this context helps at all.

enter image description here

Please help.

Upvotes: 0

Views: 2001

Answers (1)

Emre Aydınlık
Emre Aydınlık

Reputation: 71

Document says;

🌒 Support dark-mode/night-mode @v3.11.0+.

You are probably using the @uiw/react-md-editor package under <3.11.0. If you upgrade the version above the required one as it says in the documentation, your problem should be fixed.

After updating your version;

Add your parent div data-color-mode={"your preferred dark or light mode"} and you will get the solution.

Example:

<div data-color-mode="light">
   <h3>Light</h3>
   <MDEditor height={200} value={value} onChange={setValue} />
</div>

Upvotes: 1

Related Questions