Estoy tratando de hacer que la cookie se cargue cuando lo hace el cuerpo, y luego verifico qué valor tiene. Si darkmode = true, entonces debería mostrar css/cssmain.css. Si es falso, debería mostrar css/csslight.css. La cookie funciona: si uso el botón para cambiar de oscuro a claro, cambia el modo oscuro de verdadero (oscuro) a claro (falso) y viceversa. Incluso permanece cuando actualizo la página, pero el css cambia a su archivo predeterminado.
Básicamente, no puedo entender cómo hacer que darkMode entre en la declaración if en mi javascript. Lo probé con onload="getCookie(darkMode)" para tratar de poner el valor de cookie darkMode (verdadero o falso) en el script. Parece que simplemente no ejecuta el script, porque incluso si agrego una alerta, la alerta no aparece cuando uso el botón.
HTML:
<head> <title>Freshwater Fish</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/cssmain.css"> <link rel="stylesheet" type="text/css" href="css/desktopview.css"> <link rel="stylesheet" type="text/css" href="css/mobile.css"> <link rel="stylesheet" type="text/css" href="css/slides.css"> <link id='css_theme' rel='stylesheet' type='text/css' href='css/csslight.css'> <script src="js/fullstackfrog.js"></script> </head> <body onload="getCookie(darkMode)"> <button class="lightmodeButton" onclick="document.getElementById('css_theme').setAttribute('href', document.getElementById('theme').value, document.cookie = 'darkMode=true'); if (document.getElementById('theme').value == 'css/cssmain.css'){ document.getElementById('theme').value = 'css/csslight.css'; document.cookie = 'darkMode=true';} else{ document.getElementById('theme').value = 'css/cssmain.css'; document.cookie = 'darkMode=false';}">Light/Dark</button> <input type="hidden" id="theme" value="css/cssmain.css"> </body> </html>JS (fullstackfrog.js):
function getCookie(name) { if (name) { document.getElementById('theme').value = 'css/cssmain.css'; } else { document.getElementById('theme').value = 'css/csslight.css'; } }¿Sabes cómo funcionan las cookies? document.cookie seguirá siendo el mismo. Debe escribir algo para obtener la cookie y analizar el valor de document.cookie . Intente leer https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie y use los ejemplos.