Hey there! Good job on this one.
For the dark mode bug, I believe it is because the setState hook queues a render (and only changes it for the next render of the component), it doesn't update the state straight away, hence why you need to click the button twice.
This might be confusing to read, so I encourage you to check out the new React docs, which helped me understand this too. The specific section where this is explained is https://beta.reactjs.org/learn/state-as-a-snapshot, but I would go through the whole tutorial.
To fix it, you'll need to separate your logic of checking whether the theme is light or dark, to a useEffect() hook (https://reactjs.org/docs/hooks-effect.html) and check when the [darkmode] variable has been changed.
something like:
useEffect(() => {
if (darkMode) {
document.documentElement.setAttribute("data-theme", "dark");
} else if (!darkMode) {
document.documentElement.setAttribute("data-theme", "light");
}
}, [darkmode]);
For the issue with the max viewport , I would remove the max width on the body, and add it to the main content container instead (with how wide you want the component to go), and give it a margin: 0 auto to ensure the content stays on the middle of the screen.
Hope that helps! Reach out if anything is confusing.
Cheers
