[Cub] Dark mode based on user preferred mode

[mmaismma]

Description
Cub's Contraption has a dark mode in the beta version which can be toggled by typing invert.
Currently, it will only switch the mode if you type the word on the webpage. But it would be smart to automatically change the mode according to the mode the user is using for the system.

Possible solution(s)
This feature can be obtained with the CSS media feature prefers-color-scheme. As MDN states

The prefers-color-scheme CSS media feature is used to detect if the user has requested the system to use a light or dark color theme.

If the media feature returns dark open the page in dark mode, and if it returns light open the webpage in light mode.

[shee35]

can I work on this issue @mmaismma ?

[mmaismma]

Why not? Everyone is welcome!

[shee35]

Why not? Everyone is welcome!

👍

[mmaismma]

The dark mode is toggled by toggling dark in the body's classList by the function darken(). Since CSS cannot add or remove classes, we will need to also use Javascript for this purpose. We will check if the user has preferred dark mode with the CSS media-feature prefers-color-scheme with Javascript's window.matchMedia().
When the window loads, check for window.matchMedia('(prefers-color-scheme: dark)').matches, if it returns true, call darken().