search

CTFd / core-beta

Apache License 2.0
10 stars 23 forks source link

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

Closed erdnaxe closed 4 months ago

erdnaxe commented 5 months ago

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:

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

Light mode: image

Dark mode: image

ColdHeat commented 5 months ago

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

ColdHeat commented 4 months ago

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 commented 2 months ago

@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.

https://github.com/tailwindlabs/tailwindcss/discussions/3904#discussioncomment-563934

Any opinion on this approach?

EDIT: For context here is the PR https://github.com/CTFd/core-beta/pull/88