First off, I'm a noob when it comes to javascript, it's a foreign language to me.
I have implemented Darkmode.js on my simple website that is built in HTML and CSS using the following code in my html header:
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>
function addDarkmodeWidget() {
new Darkmode().showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
</script>
```
But I am clueless as to how to use the configuration options. I have tried half a dozen or so different ways I would think to use the configuration options but haven't been able to figure this one out.
I just want it to default to lightmode, that's it. Should be super simple but I am baffled over here. Gratitude and Appreciation for anyone who can make it easy for me! Thanks in advance!
I used ChatGPT to figure it out, such an awesome technology. Here is the solution:
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>
function addDarkmodeWidget() {
// Configuration options
const options = {
bottom: '32px', // Position of the button from the bottom
right: '32px', // Position of the button from the right
left: 'unset', // Position of the button from the left (optional)
time: '0.3s', // Transition time
mixColor: '#fff', // Color of the mix
backgroundColor: '#fff', // Background color for the light theme
buttonColorDark: '#100f2c', // Dark mode button color
buttonColorLight: '#fff', // Light mode button color
saveInCookies: true, // Save the mode in cookies
label: '🌒', // Label of the button in dark mode
autoMatchOsTheme: false // Automatically match the OS theme
};
// Initialize Darkmode with options
const darkmode = new Darkmode(options);
// Show the widget
darkmode.showWidget();
}
// Add the Darkmode widget when the window loads
window.addEventListener('load', addDarkmodeWidget);
</script>
```
Looking at it, it all makes perfect sense. I learned a bit about Javascript today!