• Firefox Developer Tools: How to toggle between dark and light mode color schemes in your browser

    Image by 12995263 from Pixabay

    Add dark and light CSS color schemes media queries to the extensive list of “must haves” for modern websites.

    I’m using Firefox for Linux Mint to write these steps, so there may be slight variances between different operating systems. This color mode switching tool is helpful when developing dark and light color schemes for websites. Everyone should be using this tool when creating themes!

    1. First, open up the Firefox browser and navigate to your website of choice.
    2. Press F12, Ctrl+Shift+I, or go to the top menu and click “Tools > Browser Tools > Web Developer Tools.”
    3. On the styles pane, you can click the sun or moon icon to toggle between dark and light color schemes for a website.

    Dark and light color scheme options make for great accessibility features that all modern websites must implement to help benefit the overall user experience.

    Nowadays, I’m including dark and light media queries for all of my style.css files in themes I create. This is basically becoming a standard, “must have” in all modern websites. No one wants to see your all white website when they’re in a dimly lit room. We need to be able to switch to light mode if we’re outside on a sunny day or dark mode if it’s night. By adding these simple media queries with custom colors and styles inside them, we allow the user to decide when is best for them to use dark or light mode by switching the setting on their device. These media queries adapt to the device’s default setting, which seems pretty ideal to me. There is not even really a need for a color scheme toggle functionality on most websites if these awesome CSS features are implemented from the start!

    @media (prefers-color-scheme: light) {
         My light color scheme styles here
    @media (prefers-color-scheme: dark) {
         My dark color scheme styles here


One response to “Firefox Developer Tools: How to toggle between dark and light mode color schemes in your browser”

  1. […] a dark and light color scheme in my style.css file. I recommend setting your own standard, and start developing dark and light modes for all your websites so your visitors get the color experience they prefer. Feel free to customize […]

Leave a Reply

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