use a button

Author: DylanVann

packages/docs/index.css

@@ -63,7 +63,8 @@ input {
   display: none;
 }
 
-label, button {
+button {
+  min-width: 120px;
   border: 1px solid var(--color);
   padding: 0.5rem 1rem;
   border-radius: 2px;

packages/docs/index.js

@@ -13,23 +13,21 @@ const changeFavicon = (src) => {
 const { mode } = window.__perfect_dark_mode__
 
 // Get some elements we will use.
-const labelElement = document.getElementById('label')
-const checkboxElement = document.getElementById('checkbox')
+const toggleElement = document.getElementById('toggle')
 
 // Listen to the color mode and update the UI.
 mode.subscribe((v) => {
-  checkboxElement.checked = v === 'dark'
-  labelElement.childNodes[2].textContent = v === 'dark' ? '🌚 Dark' : '🌝 Light'
+  toggleElement.textContent = v === 'dark' ? '🌚 Dark' : '🌝 Light'
   changeFavicon(v === 'dark' ? 'moon.png' : 'sun.png')
 })
 
 // At this point our callback will have been called,
 // so the checkbox state and text will be correct and we can show them.
-labelElement.style.visibility = 'unset'
+toggleElement.style.visibility = 'unset'
 
 // When the checkbox is clicked we update the mode.
 // Our listener above will do the rest.
-checkboxElement.addEventListener('change', (e) =>
+toggleElement.addEventListener('click', (e) =>
   mode.update((v) => (v === 'light' ? 'dark' : 'light')),
 )
 

packages/docs/index.pug

@@ -32,9 +32,7 @@ html
         // For users with JS disabled there will not be a color mode toggle, they can change
         // their system color mode.
         p You can set the color mode, this will be saved.
-        label(id="label" style="visibility: hidden;")
-            input(type="checkbox" id="checkbox")
-            | 🌝 color mode
+        button(id="toggle" style="visibility: hidden;") 🌝 color mode
         p You can reset the color mode and fallback to system color mode.
         button(id="button") Reset
         p For debugging and understanding here is the saved color mode and the OS color mode.