A light/dark theme toggle react component
Here are some suggestions:
handleClick method
Intead of calling document.getElementById and checking for .checked twice, you can store it's value into a constant like this:
const isDarkMode = document.getElementById(&quot;switch-style&quot;).checked;

then just do window.localStorage.setItem(&quot;theme&quot;, isDarkMode ? &quot;dark&quot; : &quot;light&quot;);
After these changes, the method will look like this:
handleClick() {
    document.body.classList.toggle(&quot;dark&quot;);
    const isDarkMode = document.getElementById(&quot;switch-style&quot;).checked;
    window.localStorage.setItem(&quot;theme&quot;, isDarkMode ? &quot;dark&quot; : &quot;light&quot;);
}

componentDidMount method
This code can be simplified
if (window.localStorage.getItem(&quot;theme&quot;) === &quot;dark&quot;) {
    bodyClassList.add(&quot;dark&quot;);
    themeSwitch.checked = true;
} else if (window.localStorage.getItem(&quot;theme&quot;) === &quot;light&quot;) {
    bodyClassList.remove(&quot;dark&quot;);
    themeSwitch.checked = false;
}

You could make use of toggle method's second parameter, which is a boolean value that forces the class to be added or removed, regardless of whether or not it already existed.
So that code could be changed to
const mustUseDarkMode = window.localStorage.getItem(&quot;theme&quot;) === &quot;dark&quot;; 
bodyClassList.toggle(&quot;dark&quot;, mustUseDarkMode);
themeSwitch.checked = mustUseDarkMode;