dark mode on fly

[ats1999]

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

[ats1999]

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?

[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.

[js87zz]

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

[ajruckman]

Hi, I have a use case for this too, would love to see it added to the API :)

[leangseu]

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>

[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.

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.

[gautam-bmdi]

Would love to see this feature too!

[aaronvegh]

I would like a vote for this feature as well, for what it's worth. 🙏