Dark mode isn't working #181
Comments
I see that's just adding a data-color-mode="dark". I tried that on a parent element as well as on the html element. It isn't working. I'm using next.js and following your example exactly like here to import the css: import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import dynamic from "next/dynamic";
import { useState } from "react";
const MDEditor = dynamic(
() => import("@uiw/react-md-editor"),
{ ssr: false }
);
function HomePage() {
const [value, setValue] = useState("**Hello world!!!**");
return (
<div>
<MDEditor value={value} onChange={setValue} />
</div>
);
}
export default HomePage;try adding the |
|
@jacobcoro There is no way to reproduce your problem. Can't help you solve the problem. |
|
@jaywcjlove I'll have to make a sandbox tomorrow to show you. But I'm pretty sure what's happening is that the .css files you made for next.js users are only building the light mode colors
Notice in the creenshots below that the generated .css files have hard-coded colors, and no rules to change color based on the
|
|
these files should have something like: /* Light Mode */
html[data-color-mode='light'] {
--text: #f5841f;
}
/* Dark Mode */
html[data-color-mode='dark'] {
--text: #f39a4d;
}
.w-md-editor {
color: var(--text);
}otherwise they cannot draw from the data attribute. |
|
I'm guessing that for the non-next builds you are doing some switching of the inline-styles client-side? |
|
What I have done is to manually overwrite the styles like this: this does not solve all styling issues but at least the text is visible ^^ |
I've set
data-color-mode="dark"on the root<html>but the editor is still in light mode.Looking through the source css I don't see any references to the
data-color-mode.How is dark mode supposed to work?
source code is here is you are interested
The text was updated successfully, but these errors were encountered: