I have a script that toggles darkmode component which I have added to my index.html file in my public folder. Decided to move it to my view's itself and render on mounted. Not sure if I am doing it correctly though since it does not change to darkmode once toggled.

Here is the initial script I added to index.html in public folder:

  const checkbox = document.querySelector('#checkbox');
  const html = document.querySelector('html');

  const toggleDarkMode = function () {
    checkbox.checked
      ? html.classList.add('dark')
      : html.classList.remove('dark');
  }

  toggleDarkMode();
  checkbox.addEventListener('click', toggleDarkMode);

Here I am moving it to my view and load once mounted:

<script>
import Darkmode from '../components/Darkmode.vue';
import Footer from '../components/Footer.vue';

export default {
  name: 'About',
  components: {
    Darkmode,
    Footer,
  },
  mounted() {
    const checkbox = document.querySelector('#checkbox');
    const html = document.querySelector('html');

    const toggleDarkMode = () => (
      checkbox.checked ? html.classList.add('dark') :
        html.classList.remove('dark')
    );
    toggleDarkMode();
  },
};
</script>

Just for reference here is the DarkMode.vue component which toggles the mode:

<template>
    <div class="rounded-lg flex bg-gray-600 items-center justify-center mx-auto absolute top-1 right-0 left-3/3 mt-2 mr-2 z-50">
        <span class="text-md font-extralight">
            <i class="fas fa-sun"></i>
        </span>
        <div>
            <input class="hidden" id="checkbox" name="" type="checkbox"/>
            <label class="cursor-pointer" for="checkbox">
                <div class="w-9 h-5 flex items-center bg-gray-300 rounded-full p2">
                    <div class="w-4 h-4 bg-white rounded-full shadow switch-ball"></div>
                </div>
            </label>
        </div>
        <span class="text-xs font-semibold">
            <i class="fas fa-moon"></i>
        </span>
    </div>
</template>

<script>

export default {
  name: 'Darkmode',
  props: {
    msg: String,
  },
};

</script>

Am I missing something or this suppose to work?