transition only when checking/unchecking checkbox

I'm learning how to make a site and decided to make a dark mode checkbox for it. I set a transition: 0.5s ease-in-out to make it look good but the problem is that the transition occurs everytime I change pages and it hurts the eyes. How can I make it so that the transition only happens when I check or uncheck the checkbox.

javascript code css code