Adding dark mode to your web app

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.

See the Pen
Wisc Parks (Part 8): Changing v-if to v-show and adding spans for FA
by Joe Steinbring (@steinbring)
on CodePen.

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.

See the Pen
Wisc Parks (Part 12): Adding Dark Mode
by Joe Steinbring (@steinbring)
on CodePen.

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.

See the Pen
Wisc Parks (Part 13): Adding Dark Mode (Part 2)
by Joe Steinbring (@steinbring)
on CodePen.

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.

 

[ Cover photo by Josh Nuttall on Unsplash ]

Leave a Reply

Your email address will not be published. Required fields are marked *