Tengo una palanca para un selector de tema de color para mi sitio web. Aquí está el código JavaScript para el selector de temas:

 $('.theme-switch').on('click', function(e) { const valChoice = $('html').attr('data-theme') === 'dark' ? 'light' : 'dark'; window.localStorage.setItem('themeChoice', valChoice); $('html').attr('data-theme', valChoice); } );

Esto está funcionando perfectamente. También tengo otras secuencias de comandos para recordar la elección de un usuario cuando se carga una página después de la elección del tema. También cubre la configuración de color del dispositivo cuando se carga una página.

Quiero cubrir más que eso. Me gustaría ver cambios en tiempo real si un usuario cambia la configuración de color del dispositivo cuando está en una página. Así que agregué el script:

 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) { const colorScheme = e.matches ? 'dark' : 'light'; if (colorScheme === 'dark') { $('html').attr('data-theme', 'dark'); } else { $('html').attr('data-theme', 'light'); } } );

El código funciona como se esperaba. Responde si hay un cambio en la configuración de color del dispositivo. ¡Pero hay un pequeño problema!

El modo de color del sitio web no debe cambiarse al modo de dispositivo si un usuario ha elegido un tema en la página en ejecución haciendo clic en el botón de cambio de tema. Quiero decir, el modo de sitio web no debe cambiarse al modo de dispositivo en tiempo real si un usuario ya ha elegido un tema en la ventana actual.

¿Alguien puede ayudarme a hacer eso?