DISCLAIMER: You MUST have installed Bootstrap for this! This library uses Bootstrap's theme and dropdown system!
- Add the
themer.min.jsscript to your page and of course edit the location to fit your needs
<script src="./themer.min.js"></script>
- For a lot better experience and 100% functionality, insert
onLoad="Themer.init()"attribute to your body element so for example it may look like this:
<body onLoad="Themer.init();">
- Now, we will add a button to change themes. Use the element
<themer-btn></themer-btn>with attributebtnclassset to whatever classes the bootstrap's dropdown button should have. So for example, we can use our custom classthemebtn:
<themer-btn btnclass="themebtn"></themer-btn>
Or bootstrap's secondary button class:
<themer-btn btnclass="btn btn-secondary"></themer-btn>
The auto theme uses local time to determine if the site should use light or dark theme.
So in night (from 19:00 - 8:59) the site uses dark theme. But in day (from 9:00 to 18:59) the site uses light theme.