Dark Mode Support

[Basketballforce]

Hey there Dolphin team!

I figured it was time that the Dolphin site had a dark/light mode toggle so I took a stab at it.

These changes include:

• Dark mode css
• Dark/Light toggle that uses browser/os preferences, local storage and icon toggling to change
• Curated edits for a pleasant dark mode experience
• Made up of 1 main css file, small edits to the main css styling, and js logic to handle icon switching
• Css for every (known) page on the dolphin-emu domain

Notes:

• Per the contributing instructions, the static and media file paths appear to be overwritten in Django. I'm not sure if this will occur but, I imagine it is possible that the added css and js href/script tag sources may be off in other people's environment. If so, let me know and I will take a look at fixing and providing screen shots so people can get an idea of what was changed

• I am able to test css edits on dolphin pages hosted publicly (using chrome dev tools) but, was unable to test some locally due to database limitations/Django db connections that appear to be outside my control.

Thank you! BasketballForce

[Basketballforce]

Uploading some screenshots for reference. A local version with just the plain html, css, and js can be found here

[MayImilae]

Why orange?

[Basketballforce]

Its the color invert (inverted color) of the Dolphin blue logo.

I think it gives the dark mode its own unique flare but, changing this back to the classic blue would be very easy and do-able if preferred!

[MayImilae]

Definitely would be preferred. We use blue everywhere already, plus... bright orange on black is rather piercing imo.

[Basketballforce]

I went and reverted the color changes from orange to the original blue. I have attached some screenshots for reference. I haven't updated the pull request since the original blue in dark mode doesn't have the best color contrast and dark mode experience (imo).

I will try to select a more "dark friendly" blue color scheme/theme that aligns to the original design. After which I will add more screenshots for reference and update the pull requests

[Basketballforce]

After second review, the original blue looked perfectly fine for dark mode. Smaller additional edits have been made for quality of life. These are:

1) Links on the darker background/black background have been made a lighter shade of blue for color contrast sake. 2) Spacing between the light/dark mode icons and the hamburger toggle for mobile view has been increased for clearer/consistent separation of elements. 3) Button styling for the downloads page (btn-info) has been reverted back to original

The code has been updated/pushed to the pull request. Dark mode looks very similar to the most recent changes above in which dark mode was reverted to blue. I will add one or two screenshots below to reflect the new changes.

[osfanbuff63]

This looks great, and I'm picky with dark mode :P

For comparison, here's Dark Reader's automatic dark mode:

The native dark mode is almost always better than that too.