From the pages of Max Pelic's Blog:

CSS Only Dark Mode Toggle

CSS only Dark/Light mode with prefers-color-scheme support.

Click the button to toggle the color scheme. This page defaults to light mode, but on a browser that supports prefers-color-scheme, it defaults to the selected color scheme.

View This Post to learn how to implement a dark mode

This example was developed by Max Pelic for maxpelic.com. You may link to this document as a resource, but may not distribute the code contained herein without permission.

The moon / sun icons are from FontAwesome and fonts are from Google Fonts

Privacy Policy