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