How to detect prefers-color-scheme with media queries

In modern web development, the prefers-color-scheme media query is a powerful tool that allows you to adapt your website's color scheme based on the user's system theme preferences. This can enhance user experience by providing a more visually pleasing interface that aligns with their chosen settings.

Here’s how to use it:


        @media (prefers-color-scheme: light) {
            body {
                background-color: white;
                color: black;
            }
        }

        @media (prefers-color-scheme: dark) {
            body {
                background-color: black;
                color: white;
            }
        }