react-markdown-editor
react-markdown-editor copied to clipboard
uiwjs
Dark mode isn't working
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
@jacobcoro Example: https://codesandbox.io/embed/react-markdown-editor-ybpce?fontsize=14&hidenavigation=1&theme=dark
@jacobcoro Example: https://codesandbox.io/embed/react-markdown-editor-ybpce?fontsize=14&hidenavigation=1&theme=dark
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 data-color-mode to that parent div. doesn't change it
@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
"css:build:dist": "compile-less -d src --combine markdown-editor.css --rm-global",
Notice in the creenshots below that the generated .css files have hard-coded colors, and no rules to change color based on the data-color-mode:
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? That approach might not work in next
What I have done is to manually overwrite the styles like this:
.wmde-markdown-color code[class*="language-"] {
color: #ffffff !important;
}
.w-md-editor-text-pre {
color: #ffffff !important;
}
this does not solve all styling issues but at least the text is visible ^^
