Dark Mode is a staple of modern web apps and an excellent way to better care for our eyes. However, you don’t have to enable dark mode for your entire desktop to test your web app’s dark mode implementation. Here’s how to enable it at the browser-level.
Before we dive in, this might not make much sense. Why wouldn’t you just toggle between dark and light mode at the operating system or desktop level?
Honestly? Because to do so might involve too many clicks and mouse gestures, and doing so in the browser is about one to two clicks at most. Secondly, you might just prefer it or find it quicker and easier.
Either way, here’s how you do it in the top three browsers (by marketshare): Google Chrome (and Chromium), Apple Safari, and and Firefox.
I’ve not included Edge as I don’t run Windows. But, if you could send me a good screenshot with the relevant steps, I’m happy to include it.
To enable dark mode in Google Chrome or Chromium, navigate to Settings > Appearance. Then, choose Dark in the dropdown next to Mode, near the top of the page.
Unfortunately, Safari on macOS, iOS, and iPadOS don’t – natively – support toggling between light and dark mode. However, that’s not to say that you can’t do it; well, you can on macOS. But, you’ll need to use a Safari extension that let’s you do so. Here are three extensions you could use:
To toggle between dark and light mode in Firefox, open Settings, then navigate to General > Language and Appearance > Website appearance and choose Dark.
Of all of them, I like how Firefox implements it the most. But, regardless of your preference, that’s how to do it, without toggling between dark and light mode at the desktop level.
When building reusable Mezzio packages, such as for user management, payments, and authentication, do users have to enable them manually, or are you automating it for them? In this short tutorial, I’ll show you how to enable them almost automatically, saving your users time and effort.
Laracon AU 2024 is over, so I thought I’d share a bit of what it was like for me, especially as I’ve not been to Laracon before.
Docker is an excellent way of deploying software. But, how do you know if your build configurations (your Dockerfiles) are valid without building them? In this short tutorial, I’ll show you how.
When using curl, how do you set the value of one or more of the POST variable’s from the contents of a file? For the longest time, I didn’t know. But recently I found out. In this post, I’ll step you through several ways you can do it.
Please consider buying me a coffee. It really helps me to keep producing new tutorials.
Join the discussion
comments powered by Disqus