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

[js87zz]

@ats1999 There are currently no APIs for changing themes. Your method is correct, and I will think about adding API. Thank you!

[ats1999]

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.