code.djangoproject.com icon indicating copy to clipboard operation
code.djangoproject.com copied to clipboard

White background CSS on input and textarea elements makes dark themes bad

Open mlissner opened this issue 6 years ago • 1 comments

These days you can enable a dark theme on Firefox. In addition to inverting most of the browser's chrome so that it's black, dark themes also invert the input elements on every page so that by default you're writing white text on a black background. (I find this to be nuts, but the theory is that the input elements are drawn by the OS, and should match the theme — fine, whatever.)

Anyway, this works fine much of the time, but lots of sites assume a light theme or have never tested a dark theme. Among such sites is code.djangoproject.com. On this website, if you have a dark themed browser and you type into the input box you get white text on a white background. Why? Because somewhere in the CSS the background of inputs and text areas is set to white. This overrides the dark theme, which would normally make the background black.

That can be OK, but code.djangoproject.com doesn't set the color of the text in these elements, so you get the default from the theme, which is also white. The result: White text (from the theme) on a white background (from the CSS).

The solution is either:

  1. Remove the background color from the CSS so that the theme can do its normal thing, or
  2. Explicitly set the color of the text in input elements and textareas.

I tried to sort this out, but couldn't find the rule in the scss file. Weird. Anyway, hopefully this is a super easy one, if I've explained it properly.

mlissner avatar Feb 21 '18 17:02 mlissner