Open ats1999 opened 3 years ago
We just need to add the class name toastui-editor-dark
here. But, doing it by traversing DOM is not good. Is there any way to do it?
Current workaround is
const toggleDarkMode=()=>{
let el = document.getElementsByClassName("toastui-editor-defaultUI")[0];
if(el.classList.contains("toastui-editor-dark"))
el.classList.remove("toastui-editor-dark");
else el.classList.add("toastui-editor-dark");
}
It's working perfectly, but still if there is any other way then let me know.
@ats1999 There are currently no APIs for changing themes. Your method is correct, and I will think about adding API. Thank you!
Hi, I have a use case for this too, would love to see it added to the API :)
Current workaround is
const toggleDarkMode=()=>{ let el = document.getElementsByClassName("toastui-editor-defaultUI")[0]; if(el.classList.contains("toastui-editor-dark")) el.classList.remove("toastui-editor-dark"); else el.classList.add("toastui-editor-dark"); }
It's working perfectly, but still if there is any other way then let me know.
The other work around is that you can just add the class to the wrapper dom. Seem like it always overwrite the default. I would love to have direct API for this though.
<div className={`editor-panel-editor${theme == 'dark' ? ' toastui-editor-dark': ''}`}>
<Editor
ref={editorRef}
initialValue={content}
previewStyle="vertical"
height="600px"
initialEditType="markdown"
useCommandShortcut={true}
plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]}
/>
</div>
Current workaround is
const toggleDarkMode=()=>{ let el = document.getElementsByClassName("toastui-editor-defaultUI")[0]; if(el.classList.contains("toastui-editor-dark")) el.classList.remove("toastui-editor-dark"); else el.classList.add("toastui-editor-dark"); }
It's working perfectly, but still if there is any other way then let me know.
The other work around is that you can just add the class to the wrapper dom. Seem like it always overwrite the default. I would love to have direct API for this though.
<div className={`editor-panel-editor${theme == 'dark' ? ' toastui-editor-dark': ''}`}> <Editor ref={editorRef} initialValue={content} previewStyle="vertical" height="600px" initialEditType="markdown" useCommandShortcut={true} plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]} /> </div>
both of them would work and wait for this feature to be inbuilt.
Would love to see this feature too!
I would like a vote for this feature as well, for what it's worth. 🙏
Summary
I want to change dark mode of the editor when user clicks on the button.
Screenshots
In the above picture, you can see i have added a dark mode button. I want to change mode from light to dark and dark to light when user click on the button.
Version
latest
Additional context
I am using ReactJS.
When user click on the button then
toggleDarkMode
function will be executed. Although,theme
state variable is changeing, but UI is not updating.live
https://codesandbox.io/s/still-night-0feor?file=/src/App.js