nhn
dark mode on fly
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.
export default function App() {
const [theme, setTheme] = useState("light");
let darkModeOn = false;
console.log(darkModeOn,theme)
const toggleDarkMode=()=>{
darkModeOn = !darkModeOn;
setTheme(darkModeOn?"light":"dark");
}
return <Editor
initialValue="# hello react editor world!"
previewStyle={previewStyle}
height="400px"
initialEditType="markdown"
useCommandShortcut={true}
theme={theme}
toolbarItems={[
...items, [{
el: toggleFullScreen(editorRef),
tooltip: 'Toggle Full Screen'
}, {
el: previewStyleButton(),
tooltip: "Preview Style"
}, {
el: darkMode(toggleDarkMode),
tooltip: "Preview Style"
}],
['scrollSync']
]}
/>
}
/>
}
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
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.
