Doesn't work with checkbox/switch element instead of button

[colinespinas]

Doesn't work with checkbox/switch element instead of button

[ColinEspinas]

Hello @edelstone, thanks for opening this issue as this might help people in the future.

As you noticed, the toggle option is mainly reserved to buttons but you can make checkbox work with darken quite easily using the on, off and toggle methods.

Here is a potential solution to your issue:
Adding an event listener on checkbox click

<label for="darkmode-toggle">Toggle darkmode</label>
<input type="checkbox" name="darkmode-toggle" id="darkmode-toggle">

const darkmode = new darken(options, callback);

let darkmodeToggle = document.getElementById('darkmode-toggle');
darkmodeToggle.addEventListener('click', () => {
  if (darkmodeToggle.checked) darkmode.on();
  else darkmode.off();
});

NOTE: Using the callback function and the toggle option might not work because the preventDefault function is called by the method that handles the click on the element.

[ColinEspinas]

Additionally, you can read the state of the darkmode from the callback to set the unchecked/checked status of your checkbox.

const darkmode = new darken(options, active => {
  if (active) darkmodeToggle.checked = true;
  else darkmodeToggle.checked = false;
});

Be free to ask for anything and share your toughs on how to improve darken's usability.

[ColinEspinas]

Not being an expert is not a problem, I think anyone that wants to use an open source library should be able to with a bit of elbow grease. Do not hesitate to ask for any issue you might encounter as this is about making a library easier to use by everyone.

That said, there are some errors in you code, here is the snippet you need to do what you want, just add some options to customize your darkmode.

// Get the checkbox element from DOM.
let darkmodeToggle = document.getElementById('darkmode-toggle');
    
// Set options.
const darkmodeOptions = {
  class: "darkmode-active",
  /* Add here any option but do not use the toggle 
  option as you manually added an event listener. */
}

// Instantiate darken with options and callback.
const darkmode = new darken(darkmodeOptions, active => {
  // If darkmode is active then check the checkbox.
  darkmodeToggle.checked = active;
      
  // Same as       
  // if (active) darkmodeToggle.checked = true;
  // else darkmodeToggle.checked = false;
});

// Add event listener on checkbox click.
darkmodeToggle.addEventListener('click', () => {
  // Depending on the state of the checkbox, call the on/off methods.
  if (darkmodeToggle.checked) darkmode.on();
  else darkmode.off();
});

The errors you made were declaring 2 times the darkmode constant instead of using a single instance of darken, also you do not want to use the toggle options as it adds a second event listener on click that you do not want.

[ColinEspinas]

I'm happy to hear this worked for you.

I plan to remake the demo to include code examples and documentation. If you've got anything to propose I am all ear.

[ColinEspinas]

No problem, close this issue when you are done.

[edelstone]

Hey Colin, thanks for the reply.

I assumed the API methods could potentially get me there, but without more structured examples my knowledge of JS wasn't going to be enough, so thanks for the extra assistance here. After playing with the above suggestions I'm still not able to get it to work. Not being an expert it's entirely possible I'm doing something wrong, but I'll post the code below. Note that I'm hosting the darken script locally and have verified the path is correct.

Feel free to make more suggestions. Obviously I don't intend to take you down the rabbit hole of this particular project if it's not useful to your library or audience as a whole.

Switch:

	<div class="dark-mode">
		<label for="darkmode-toggle" class="switch" tabindex="0">
	  	<input id="darkmode-toggle" class="darkmode-toggle" type="checkbox" tabindex="-1">
	  	<span class="control"></span>
		<span class="label">Go dark</span>
		</label>
	</div>

Scripts just before closing body tag:

<script src="/scripts/darken.js"></script>
	<script>
		const darkmode = new darken({
			class: "darkmode-active",
			toggle: "#darkmode-toggle"
		});

		const darkmode = new darken(options, callback);

		let darkmodeToggle = document.getElementById('darkmode-toggle');
		darkmodeToggle.addEventListener('click', () => {
			if (darkmodeToggle.checked) darkmode.on();
			else darkmode.off();
		});

		const darkmode = new darken(options, active => {
		  if (active) darkmodeToggle.checked = true;
		  else darkmodeToggle.checked = false;
		});
	</script>

[edelstone]

Nice. I assumed it had to have something to do with superfluous code. Really appreciate the notes. And thus far, it looks like that is working for me locally. Let me work on it a bit more and I'll post back.

Thank you!!

[edelstone]

I do wonder if maybe, once I'm done with my use case, if something like this example could/should be added to the docs?

I'll be honest, finding a dark mode library that supports switches over buttons (for the simple use case) is hard to find. That said, I don't know how many partially-knowledgable-of-JS people like me are out there running open source projects.

[edelstone]

I'll report back in the next couple days while I try to implement. THANK YOU!

[edelstone]

Hey @ColinEspinas,

Sorry for the delay and thanks again for the help. One additional snag I'm noticing is that nothing accounts for keeping the switch set to checked on a multi-page site.

So, for example, on the home page I turn the switch on and the darkmode-active class appears on body and the switch is set to checked. I can refresh the page and that state remains. But when I click a link to the /about page, for example, the darkmode-active class remains on the body but the switch is now unchecked. The switch also no longer functions at all on the other pages that dark mode wasn't initially activated on. I'm wondering if it's non-trivial to remember the checked state across the site, i.e. that it could be activated on any page, user can navigate around, and then be deactivated on any page too.

Not a huge deal if it isn't; I should probably not fight this too hard as simply using a button instead is not that big of a deal. Let me know, and many continued thanks.

[edelstone]

@ColinEspinas Apologies, disregard the above; I made a simple mistake in the code.

[ColinEspinas]

On every page you need the same snippet to make it consistent, are you setting the state of your check box correctly ?

// From previous snippet

...
// Instantiate darken with options and callback.
const darkmode = new darken(darkmodeOptions, active => {
  // If darkmode is active then check the checkbox.
  darkmodeToggle.checked = active; // <===== This line is needed to read the state of the dark mode
      
  // Same as       
  // if (active) darkmodeToggle.checked = true;
  // else darkmodeToggle.checked = false;
});
...

If the dark mode is remembered (and it is because the darkmode-active class is active) you should be able to do it.

[ColinEspinas]

@ColinEspinas Apologies, disregard the above; I made a simple mistake in the code.

Oh well, we posted at the same time, happy to hear that.

[edelstone]

Yeah sorry about that, I had old checkbox/switch code on my subsequent pages, so they didn't have the right classes and just weren't functioning at all.

[edelstone]

OK, it's active at https://maketintsandshades.com. Thank you for your help!

–Michael