Almost two years ago, I looked at how to use prefers-color-scheme to add “dark mode” to a website. It isn’t exactly a difficult change to make, so I figured that we could take this week to add it to the State Parks App. The last time we looked at this, it was supported by everything except IE and Edge. Now, it is supported by Edge as well. Like I mentioned last week, Internet Explorer is being EOLed on June 15, 2022, so it might not matter anymore that this doesn’t work with IE.
Let’s start by looking at what we have right now for the listing of state parks.
As you can see, there isn’t any custom CSS, yet. Now, let’s see what happens when we use prefers-color-scheme to just flip black to white and white to black.
That works to a point but I think that we can do better. The table headers are still black on black, the sorting icons and still black on black, and the blue links on a black background don’t look great.
That isn’t a huge improvement but I think that it is an improvement.
So, what do you think? Do you know of a better way? Feel free to drop a comment, below.