Dark Mode Button Not Showed on Avatar Hover in Light Mode

[PaoloDiBello]

Steps to Reproduce:

1. Login to the application.
2. Upon login, ensure that the app is in light mode. (which should be always the case I assume)
3. Hover over the avatar located at the top right corner.

Expected Behavior:

When hovering over the avatar in light mode, there should be a button for switching to dark mode.

Actual Behavior:

Instead of the dark mode button, the light mode button is being displayed upon hovering over the avatar in light mode.

Screenshot

Suggestions

In /src/components/login/loggedinbutton.jsx you could change

function useDarkLight() {
  const [activeTheme, setActiveTheme] = useState(
-    typeof document !== "undefined" ? document.body.dataset.theme : undefined,
+    typeof document !== "undefined" ? document.body.dataset.theme : "light",
  );
const inactiveTheme = activeTheme === "light" ? "dark" : "light";

Without those changes activeTheme could also be undefined.

 const inactiveTheme = activeTheme === undefined ? "dark" : "light"; // "light"

// so...
 toggle("light")

// and...
 {controls.value === "light" ? "Dark Mode" : "Light Mode"}  // controls.value is undefiend so "Light Mode" is shown 

A light Mode button with toggle("light"), and all this while the Light Mode is already on.

[PaoloDiBello]

The state is still undefined at the very beginning and it only changes when I click on the button, were the changes released to production? @rgerum

[rgerum]

The changes are first hosted on beta.duostories.org Are you able to run and test the website locally or are you doing the changes blind? I did not test your pull request, the code change looked resonable to I just had it merged.

[rgerum]

I hope the recent commit should now work 0572937 as seen on beta.duostories.org

[PaoloDiBello]

@rgerum yes, I confirm that it works now.