Color Tests Fail with Dark Reader Chrome Extension

Dark Reader is a common Chrome extension which “darkmode-ifies” websites for easy-on-the-eyes browsing.

Notice in the screenshot below how the color test fails despite assigning “blue” to <h2> (same for #00f or #0000ff).

It took me a while to realize the connection to my Dark Reader Chrome extension, which you can see in the top-right corner there. I generally forget it’s doing its thing while I browse. When I turned off the extension & re-submitted, the color test was successful.

I had the same issue in these lessons:

  • Use CSS Selectors to Style Elements
  • Use a CSS Class to Style an Element
  • Style Multiple Elements with a CSS Class
  • Add Borders Around Your Elements

… though I didn’t test past that point in the curriculum.

Whether this a bug worth fixing or not is up to you. It might be worth including a warning somewhere about possible plugin interference. I was lucky to be confident enough in my answer to investigate further - others may not be.

The test suite checks your CSS. If you have an extension that changes your CSS, then the test suite won’t work correctly.

There is a warning on the first page of the CSS section of the curriculum, but sometimes people overlook it.