Página a gusto del visitante
Un script que permite al usuario elegir la combinación de colores de la pantalla.
Los colores se eligen mediante un formulario, que actua al ser enviado (submit)
Solución
<script>
function cambColores(fondos, letras){
let ind;
ind = fondos.selectedIndex;
document.body.style.backgroundColor = fondos.options[ind].value;
ind = letras.selectedIndex;
document.body.style.color = letras.options[ind].value;
return;
}
</script>
<body>
<h2>Esta es una muestra de personalización de colores</h2>
<form name="form1" method="post" action="">Fondo:
<select name="fondo">
<option value="yellow">Amarillo</option>
<option value="white">blanco</option>
<option value="Blue">Azul</option>
</select>
Texto: <select name="texto">
<option value="yellow">Amarillo</option>
<option value="white">blanco</option>
<option value="Blue">Azul</option>
</select>
<input type="button" name="Button" value="cambiar"
onclick ="cambColores(parentElement.fondo,parentElement.texto)">
</form>
</body>
Explicación
Mediante este sencillo código los usuarios pueden seleccionar la combinación de colores de la página.
El código del script es muy simple: tan sólo asigna los colores de fondo y texto elegidos por el usuario a las propiedades backgroundColor y color del document.body.style.
Los valores son elegidos por el usuario a partir de una lista desplegable.
Como lo uso
La primera línea, con formato h2, es tan sólo para mostrar los efectos de la selección del usuario.
En la página ves un formulario que posee dos campos con las listas de los colores seleccionables por el visitante. Al picar con el ratón sobre el botón se dispara el evento que pone en marcha la función cambColores. Si quieres mas colores tan sólo tienes que añadir opciones al menú.
El color puede ponerse por su nombre como en el ejemplo o mediante las cadenas RGB (000000 a FFFFFF).
Este ejemplo podría completarse con cookies para que se conserven las preferencias de los usuarios...¿Alguien se atreve?