Template to implent Dark mode on your website. 💙 You can check it real time in the GitHub pages or CodePen
The prefers-colors-scheme media query gets applied depending on the user's color scheme preference in the OS. For example, if you selected dark mode in your OS settings, all websites with dark mode support will be displayed in your preferred mode, applying the CSS rules defined inside the prefers-color-scheme media query. It's a new, Level 5 Media Query and already has good browser support. Learn how to enable dark mode in your OS in this article.
There are two prefers-color-scheme values to choose from:
- light - the user has expressed preference for a page that has a light mode or has not expressed an active preference
- dark - the user has expressed preference for a page that has a dark mode