Basic Bootstrap 5 custom time of day script to auto use "dark mode" in your web site during time defined as "night", else during the day such auto reverts back to "light mode".
This simple project was based on lightswitch, a handy js darkmode switch I often enjoying using in various bootstrap projects, but, on this particular time the simple request from the user this project was initially created for was that they absolutely wanted no physical switch displayed on site, and something that only required including the single js file in the html files they may use without adding any other edits related to this simple project say in thier html files and also they only wanted the dark mode to enable itself at a set time considered "night" (18 & after) and then disable itself at a set time (7 to prior to 18) for example on what they considered "morning" like 7 AM and throughout the daytime. Anyway, after finishing said simple task for said request, I then opted to create a repo and share such here, for anyone that may need and or desire such.
Note: you can edit the js script if needed if these defined times are not to your needs and edit the area defining 7, 12, 18, etc, etc.
Switching to dark mode is done by the script at a predefined time of day and as such then triggers functions that includes replacments for -dark or -light as a class. Performed by DOM manipulation using JavaScript based on the default system theme. Local storage is used to save the choice under the name: colourSwitch
- Download the "tod-colourswitch.js" file
Note: While the demo file is not needed, there is included in the repo a "demo.html" file to see such with Bootstrap 5.3.0-alpha1 or if you simple need such as a base starting point
- Download the "demo.html" and related "custom.css" files if you desire to view or edit said demo on your local machine
Simply reference the tod-colourswitch.js script in your html file:
<!-- TOD Colour Switch -->
<script src="tod-colourswitch.js"></script>Designed for the plain Bootstrap 5 theme. If you're using custom themes then, you will probably have to customize it for better results.