Add dark mode

[Resonantjacket5]

Changes

• Updates bootstrap from 5.1.3 to 5.3.2 (For themes)
• Add switch theme button to nav bar.
• Modified nav.js with switchTheme function and saveTheme (save's the theme locally as a setting). Setting is saved locally using localStorage (going to another computer does not persist the setting).
• Add wikipedia mobile css override file to replace background-color and font color with bootstrap variables (mobile files are referenced externally)
• Modified wikipedia desktop css file (we have those saved locally) to replace background-color and font color with bootstrap variables

Other notes

• Tried using media preference (prefers-color-scheme) for inferring theme but didn't seem to work properly and no one has that setting anyways on desktop.
• Maybe in the future could be saved server side in sql table.
• For inverting colors, another alternative was to use "filter: invert(1) hue-rotate(180deg)!important;" on the wiki-insert div but ran into trouble since currently partially use bootstrap css in addition to the wikipedia css so could not cleanly invert all colors.
• Tried adding button as a toggle or sun/moon symbol but ran into trouble with jinga/vue maybe for next pr

[bricehalder]

This is epic!! Thanks for this awesome effort. Can you upload screenshots or a video to show its usage?

[Resonantjacket5]

Had to lower quality and trim to fit 10 megabyte limit.

https://github.com/wikispeedruns/wikipedia-speedruns/assets/5826282/61a7623e-0e48-42d3-925f-0ba77f385061

https://github.com/wikispeedruns/wikipedia-speedruns/assets/5826282/1d169eb6-c8f5-4efa-bd7d-577e63081686

[dqian3]

Dang, this is what happens when someone who knows what they're doing with CSS looks at our site lol. Will merge with the batch of other changes!

[Resonantjacket5]

Ohhhh I see we’ve changed the delimiters from the {{}} to [[]]. :)

I thought it was jinga messing it up even after adding escape characters.

[dqian3]

Ohhhh I see we’ve changed the delimiters from the {{}} to [[]]. :)

I thought it was jinga messing it up even after adding escape characters.

Oh yeah, you're actually right that it was jinja, with our weird setup of flask serving vue templates, {{}} were used by both jinja and vue, and so conflicted. So we changed the vue delimiter to [[]]

[dqian3]

@bricehalder @mliu59 Could one of you go through and check if there's any other custom components that we missed. I think it should be good

[bricehalder]

I think it looks good enough, if there's anything we missed we can address it in future PRs

[mliu59]

merge merge merge