Tengo un script que alterna el componente de modo oscuro que he agregado a mi archivo index.html en mi carpeta pública. Decidí moverlo a mi vista y renderizar montado. Sin embargo, no estoy seguro de si lo estoy haciendo correctamente, ya que no cambia al modo oscuro una vez que se activa.

Aquí está el script inicial que agregué a index.html en la carpeta pública:

 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);

Aquí lo muevo a mi vista y lo cargo una vez montado:

 <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>

Solo como referencia, aquí está el componente DarkMode.vue que cambia el modo:

 <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>

¿Me estoy perdiendo algo o esto se supone que funciona?