Dark Mode

[shrianshChari]

A dark theme is one of the features that is requested in #348, and since it seemed like basic CSS and JS work, I figured I'd give it a go. Here is the result.

Shortcomings

• Have not changed the styling for the navbar at the top, so it is very bright
• Could not find documentation on changing the styles of the Select2 dropdowns, so they stay light gray
• Because of the timing of which the JavaScript will load, the web page will undergo FOIT, where the web page will briefly flash as light mode before entering dark mode. Based on what I've read, the main way to ensure this isn't a problem is to utilize server-side rendering to serve the web pages directly in dark mode, which I don't think is what this page is designed to do.
  • I have an idea of how this could potentially be circumvented, but I don't know if it would actually work. Essentially, we would have a defined CSS file (maybe styles.css) that would serve as the file that gets used as the style that gets loaded in when the web page loads. Then, the user can select a theme from a dropdown menu, and the page would make the styles corresponding to that theme as the new styles.css to pull from, then reload the page to reapply the styles.
  • This would basically be pure JavaScript and would take more time to implement, not to mention I don't entirely know if it would prevent FOIT to begin with.

Screenshots

Open me!

[shrianshChari]

I know this isn't how Pokémon Showdown! does it, but the faster way of doing this is to use a disabled stylesheet; add disabled="true" here and also give this element an id, and then if the user wants dark mode you can toggle the disabled property of the link. Again, this should also work while the page is still loading to reduce FOIT. (It also avoids needing a separate variable to track whether the user prefers dark mode). You'll also need to remove the dark-theme class on the styles, since they'll be activated automatically depending on whether the stylesheet is disabled. This feature does require IE 9 or later, if that's relevant.

I've implemented this functionality into the dark theme, and it does reduce most of the FOIT (though there is still a little bit of FOIT in the background of where the panels are.

What it looks like

Additionally, I'd like to implement this into the Random Battles calculator (and perhaps the 1vAll and Allv1 calculators, but that would take a good amount of time to add the class names to the HTML elements.

[AustinXII]

Thank you for this, this looks really good, but I don't want to merge this without having support for all modes. Switching between randoms and the normal calc etc and going back and forth between light and dark will not go well.

[shrianshChari]

Absolutely fine, I'll update when I've finished adding dark mode support across all the modes.

[shrianshChari]

Ok, I've added dark mode for the other three calculators. I couldn't figure out how to style some of the stuff in the Honkalculator because it was all inserted using jQuery (namely, there's this little piece of text with a search box on the left that I don't know how to define styles for (it has neither a class nor an id):

Secret Search

Otherwise, I've realized what the "cascading" in CSS means (aka I've removed the dark-theme class) and applied it to the other three calculators:

Random Battles

Honkalculator

[shrianshChari]

I figured out a method to style that "Search" label.

Fixed Search

[AustinXII]

perfect, thank you!