Me gustaría mantener el tema seleccionado al actualizar la página, así como en todas las demás páginas. He visto otros ejemplos pero no sé cómo implementarlo en el código ya que soy bastante novato. He incluido el código de la funcionalidad hasta ahora. Muchas gracias de antemano.
function changeTheme(bgColor, textColor) { var styles = document.documentElement.style; styles.setProperty('--bg-color', bgColor); styles.setProperty('--text-color', textColor); } var dark = document.querySelector('#dark'); var light = document.querySelector('#light'); var blue = document.querySelector('#blue'); dark.addEventListener('click', function() { changeTheme('#333', 'white'); }); light.addEventListener('click', function() { changeTheme('white', 'black'); }); blue.addEventListener('click', function() { changeTheme('#2982F5', 'white'); }); :root { --bg-color: #333; --text-color: white; } body { font-family: sans-serif; background: #c0c0c0; } nav { color: var(--text-color); background: var(--bg-color); } ul { display: flex; justify-content: center; align-items: center; list-style-type: none; } li { margin-left: 15px; } a { color: var(--text-color); } <nav> <ul> <p>Select theme:</p> <li> <a href="#" id="dark">Dark</a> </li> <li> <a href="#" id="light">Light</a> </li> <li> <a href="#" id="blue">Blue</a> </li> </ul> </nav>Puede configurarlos en local storage y obtenerlo en la primera carga
function changeTheme(bgColor, textColor) { var styles = document.documentElement.style; styles.setProperty('--bg-color', bgColor); styles.setProperty('--text-color', textColor); localStorage.setItem('bgtheme', bgColor); localStorage.setItem('txttheme', textColor); } var dark = document.querySelector('#dark'); var light = document.querySelector('#light'); var blue = document.querySelector('#blue'); dark.addEventListener('click', function() { changeTheme('#333', 'white'); }); light.addEventListener('click', function() { changeTheme('white', 'black'); }); blue.addEventListener('click', function() { changeTheme('#2982F5', 'blue'); }); window.onload = (event) => { let bgColor = localStorage.getItem('bgtheme'); let txtColor = localStorage.getItem('txttheme'); changeTheme(bgColor, txtColor); }; :root { --bg-color: #333; --text-color: white; } body { font-family: sans-serif; background: #c0c0c0; } nav { color: var(--text-color); background: var(--bg-color); } ul { display: flex; justify-content: center; align-items: center; list-style-type: none; } li { margin-left: 15px; } a { color: var(--text-color); } <nav> <ul> <p>Select theme:</p> <li> <a href="#" id="dark">Dark</a> </li> <li> <a href="#" id="light">Light</a> </li> <li> <a href="#" id="blue">Blue</a> </li> </ul> </nav>Para eso podrías usar localStorage . Mantenga su código HTML y CSS como están. Su código JavaScript podría ser así:
// get stored theme on load let storedTheme = localStorage.getItem("theme"); if(storedTheme){ storedTheme= JSON.parse(storedTheme); changeTheme(storedTheme.bgColor, storedTheme.textColor); } function changeTheme(bgColor, textColor) { // updtate stored data when there is a click localStorage.setItem("theme", JSON.stringify({bgColor:bgColor, textColor:textColor})); var styles = document.documentElement.style; styles.setProperty('--bg-color', bgColor); styles.setProperty('--text-color', textColor); } var dark = document.querySelector('#dark'); var light = document.querySelector('#light'); var blue = document.querySelector('#blue'); dark.addEventListener('click', function() { changeTheme('#333', 'white'); }); light.addEventListener('click', function() { changeTheme('white', 'black'); }); blue.addEventListener('click', function() { changeTheme('#2982F5', 'white'); });Prueba este ejemplo:
<!doctype html> <html> <head> <title>Test</title> <meta charset="utf-8"> <style> :root { --bg-color: #333; --text-color: white; } body { font-family: sans-serif; background: #c0c0c0; } nav { color: var(--text-color); background: var(--bg-color); } ul { dislpay: flex; justify-content: center; align-items: center; list-style-type: none; } li { margin-left: 15px; } a { color: var(--text-color); } </style> </head> <body> <nav> <ul> <p>Select theme:</p> <li> <a href="#" id="dark">Dark</a> </li> <li> <a href="#" id="light">Light</a> </li> <li> <a href="#" id="blue">Blue</a> </li> </ul> </nav> <script> const app = () => { // - - app const appBgColor = localStorage.getItem('appBgColor') const appTextColor = localStorage.getItem('appTextColor') if (appBgColor && appTextColor) { changeTheme(appBgColor, appTextColor) } function changeTheme(bgColor, textColor) { localStorage.setItem('appBgColor', bgColor) localStorage.setItem('appTextColor', textColor) const styles = document.documentElement.style styles.setProperty('--bg-color', bgColor) styles.setProperty('--text-color', textColor) } const dark = document.getElementById('dark') const light = document.getElementById('light') const blue = document.getElementById('blue') dark.addEventListener('click', () => changeTheme('#333', 'white')) light.addEventListener('click', () => changeTheme('white', 'black')) blue.addEventListener('click', () => changeTheme('#2982f5', 'white')) // - - end app } document.addEventListener('DOMContentLoaded', app) </script> </body> </html>