Tomé el código javascript de Internet que crea un botón para activar y desactivar el modo oscuro y funciona perfectamente bien. Aquí pegaré solo la parte relevante de lo que he escrito hasta ahora:

 <script> // Wait for document to load document.addEventListener("DOMContentLoaded", function(event) { //store in a variable whatever the data-theme is in the sessionStorage var sessionVariable = sessionStorage.getItem("data-theme"); /* // if it doesnt exist (which is null, i think) then it sets the data-theme value to light if string(sessionVariable) == "null"{ document.documentElement.setAttribute("data-theme", "light"); // if it does exist, which means data-theme is either dark or light, then it sets it to that } else{ document.documentElement.setAttribute("data-theme", string(sessionVariable)) } */ document.documentElement.setAttribute("data-theme", "light") //THIS IS THE LINE THAT WORKS, I WOULD LIKE TO REMOVE IT FOR THE COMMENTED OUT CODE ABOVE // Get our button switcher var themeSwitcher = document.getElementById("theme-switcher"); // When our button gets clicked themeSwitcher.onclick = function() { // Get the current selected theme, on the first run it should be `light` var currentTheme = document.documentElement.getAttribute("data-theme"); // Switch between `dark` and `light` var switchToTheme = currentTheme === "dark" ? "light" : "dark"; sessionStorage.setItem("data-theme", "currentTheme"); //store in the sessionStorage whatever the data-theme's value is (the currentTheme) // Set our current theme to the new one document.documentElement.setAttribute("data-theme", switchToTheme); } }); </script>

Está todo comentado y bonito. Puedes consultarlo en pepesito1.github.io/test/general.html. El botón funciona bien.

Ahora lo que estoy tratando de hacer es agregarle la funcionalidad sessionStorage. Como puede ver, al principio comenté una gran parte del código: creo que debería funcionar, pero no funciona, y la línea original sin editar que tomé de Internet es la que dije que quiero reemplazar.

Entonces, mi lógica es que cuando la página se abre por primera vez, claramente no hay un "tema de datos" almacenado en el almacenamiento de sesión. Y cuando la segunda línea de javascript intenta getItem("data-theme"), debería devolver "nulo", ¿verdad? Luego lo hago para que si el tema de datos es nulo (lo que significa que aún no se ha definido), establece el tema en luz (modo predeterminado), pero si está definido, lo establece en lo que sea (ya sea claro o oscuro)

Sin embargo, cuando borro la línea que quiero eliminar y elimino el comentario de ese fragmento de código, el botón deja de funcionar por completo. Supongo que es porque hay algo mal con mis declaraciones "si". ¿Qué es? ¿La variable de sesión no es "nula" cuando aún no se ha definido?