React component to toggle between light and dark theme mode according to specified specifications.
Features:
<button>to toggle between modes.- Respects the user's browser preferences and uses those as its default settings.
- Checks whether the user manually selected a mode and switches to it according to their preferences.
- Use local storage rather than cookies to save it locally and reduce server bandwidth usage.
- Set a
data-themeattribute to enable greater flexibility, such as preventing styles from breaking or class overwriting, and to be CSS class independent. - Targets the top-level
<html>element so that it can apply styles to page components as the page loads.