Bug: dark mode styles on <MonsterFilterBox> and <MagicItemFilterBox>

[calumbell]

Description

The <MonsterKilterBox> and <MagicItemFilterBox> do not look right on dark mode. The text colour changes from black to white, but none of the background colours of the form elements change. This results in unreadible text due to low colour contrast.

Recreation

To recreate this bug, checkout the staging branch and visit either the /monsters or /magic-items routes. Click the show filters button. Try using it in light mode, then try using it in dark mode.

The forms in the first and second image contain the same data, but in dark mode you cannot read it because the white text matches the background colour of the input element.

Solution

Add dark mode styles to the problematic form elements in the <MonsterKilterBox> and <MagicItemFilterBox>. We have used the TailwindCSS dark: selector to handle this elsewhere on the website.

[calumbell]

This issue was fixed when #518 was merged to staging