DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Erik Smith
Erik Smith

Posted on

Detect Dark Mode Preference

Detect dark mode preference with prefers-color-scheme media query.

<style>
 @media (prefers-color-scheme: dark) {
     .light-mode-demo {
         display: none;
    }
}
 @media (prefers-color-scheme: light) {
     .dark-mode-demo {
         display: none;
    }
}
</style>
<p>You prefer 
    <strong class="dark-mode-demo">dark</strong>
    <strong class="light-mode-demo">light</strong> mode!
</p>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
amrieamrie6 profile image
Amrie Amrie

Link

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›