Add darkmode after login

[T0biii]

added darkmode but atm only darkmode, no light mode:
i tried this form the Docs:
https://mui.com/material-ui/customization/dark-mode/#system-preference
but it did not work for me

maybe add also a toggle like:
https://mui.com/material-ui/customization/dark-mode/#toggling-color-mode

"/"

"/admin/all-devices"

"Popup"

[mergeable]

Thanks for creating a pull request! A maintainer will review your changes shortly. Please don't be discouraged if it takes a while.

[GoliathLabs]

A toggle option would be nice. What exactly didn't work out for you?

[T0biii]

the const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); (MediaQuery) did not seem to work also nothing happend when i pressed the icon(Button) i added
Unfortunately, I also have no idea about TypeScript, which makes debugging difficult for me

[T0biii]

here are the branche where i tested more stuff:
https://github.com/T0biii/wg-access-server/tree/test-darkmode

[GoliathLabs]

@T0biii you could try an useEffect call for that.

useEffect(() => {
    setDarkMode(prefersDarkMode);
}, [prefersDarkMode]);

Not the cleanest solution, though. Perhaps @nwaldispuehl has an idea?

[T0biii]

@T0biii you could try an useEffect call for that.

useEffect(() => {
    setDarkMode(prefersDarkMode);
}, [prefersDarkMode]);

Not the cleanest solution, though. Perhaps @nwaldispuehl has an idea?

i dont know where

[nwaldispuehl]

I will happily have a look at it in the next days.

[nwaldispuehl]

First thanks for the cool feature, @T0biii ! 👍
I idly wished for a dark mode many times.

I allowed myself to just add the missing things:

• a toggle switch taken 1:1 from the Mui sample as linked above
• added the light mode, and initializes it depending on the operating system preference
• storing the preference in the browsers localStorage

Light:

Dark:

[T0biii]

looks very good too me. thank you for taking it on.

[T0biii]

i only found if you want to delete a device/user from the Admin Page it is not in darkmode

https://github.com/freifunkMUC/wg-access-server/blob/master/website/src/components/Present.tsx

[T0biii]

should fix it

[GoliathLabs]

Merged. Thank you @T0biii @nwaldispuehl <3

[T0biii]

big thanks to @nwaldispuehl for making the important chagnes