You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
calumbell
changed the title
Bug: dark mode styles on <MonsterKilterBox> and <MagicItemFilterBox>
Bug: dark mode styles on <MonsterFilterBox> and <MagicItemFilterBox>Jun 21, 2024
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.The text was updated successfully, but these errors were encountered: