Color theme switcher and automatic dark mode based on browser prefers-color-scheme

[erdnaxe]

This patch introduces a color mode switcher in CTFd.
By clicking a button located at the right of the navbar, users can easily switch between light and dark mode.
Also the default color mode is chosen using prefers-color-scheme. This means that CTFd will automatically switch to light or dark mode depending on system settings.

This uses the Bootstrap 5.3 dark mode feature (https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode). Most of the layout should already render correctly in dark mode, but I expect some sharp edges:

• CTFd main page logo will be less legible,
• scoreboard graphs won't switch to dark mode, and might be less legible in dark mode.

The new script is loaded without a defer to prevent blinking in dark mode (to prevent epileptic seizures).

Light mode:

Dark mode:

[ColdHeat]

Very cool! Give me some time to review this and will get back to you.

[ColdHeat]

I think this is pretty good. My major question long term is whether or not the theme should be stored server side or just browser side. I think we can address that at a later date.

[ColdHeat]

@erdnaxe I'm finding that your PR does introduce some flashing issues if you are on the dark theme.

I've found so far that embedding the color_mode_switcher.js code directly into base.html fixes this issue.

tailwindlabs/tailwindcss#3904 (comment)

Any opinion on this approach?

EDIT: For context here is the PR #88