Kolasin - Consult 
Autore: ALEJANDRO VALENTI
Visite 259,
Followers 2,
Condiviso 0
Hi friend, a user on Incomdia has posted a very interesting website where I found something I've always wanted to achieve... I couldn't find a way to contact them directly, so taking advantage of your boundless generosity, I'm asking you to take a look at this site:
At the bottom of the page, you'll find a design mode selector: light/dark.
I haven't found any object that does this; it must be some customized code. Could you give me a hand in achieving something like this?
Thank you so much.
Regards
Postato il
...No tengo ni idea, quizás podrías buscar en internet...
... Si te interesa, también tengo un invento mío antiguo y exclusivo, "de caja ciega", que acabo de actualizar. Nada especial, solo hace lo mínimo si el diseño de la página se ajusta a mi código: alto contraste y zoom de texto...
... Avísame si lo necesitas...
.
ciao
.
Autore
si te lo agradeceria....
... OK ... ciao...
<script>
/** altocontrasto (+/-) by KolAsim **/
$(function () {
let fs = 18, lh = fs + 2; const minFS = 18, maxFS = 46, stepFS = 6;
let contrast = 0; $("body").append(` <div id="accessBtn"> <svg viewBox="0 0 24 24" width="22" height="22" fill="white"> <path d="M12 2a3 3 0 110 6 3 3 0 010-6zm-1 7h2v13h-2V9zm-7 2h2v11H4V11zm14 0h2v11h-2V11z"/> </svg> </div> <div id="accessPanel"> <button data-act="contrast">◑</button> <button data-act="plus">A+</button> <button data-act="minus">A-</button> <button data-act="reset">⟳</button> </div> `); $("head").append(` <style> *, *::before, *::after { box-sizing: border-box; } #accessBtn { position: fixed; top: 10px; left: 10px; width: 42px; height: 42px; border-radius: 50%; background: #007bff; cursor: pointer; z-index: 999999; display: flex; align-items: center; justify-content: center; } #accessPanel { position: fixed; top: 60px; left: 10px; background: #eee; border-radius: 10px; padding: 8px; z-index: 999999; display: none; } #accessPanel.show { display: flex; gap: 6px; flex-wrap: nowrap; } #accessPanel button { padding: 6px 8px; border-radius: 6px; border: 1px solid #aaa; cursor: pointer; background: white; font-size: 14px; } #accessPanel button:hover { background: #ddd; } </style> `); $("#accessBtn").on("click", () => { $("#accessPanel").toggleClass("show"); }); function applyFont() { $("body *") .not("#accessPanel, #accessPanel *, #accessBtn, #accessBtn *") .css({ fontSize: fs, lineHeight: lh + "px" }); } function toggleContrast() { const els = $("body *") .not("#accessPanel, #accessPanel *, #accessBtn, #accessBtn *"); contrast = !contrast; els.css({ background: contrast ? "black" : "white", color: contrast ? "white" : "black" }); } $("#accessPanel button").on("click", function () { const action = $(this).data("act"); if (action === "contrast") toggleContrast(); if (action === "plus" && fs < maxFS) { fs += stepFS; lh = fs + 2; applyFont(); } if (action === "minus" && fs > minFS) { fs -= stepFS; lh = fs + 2; applyFont(); } if (action === "reset") location.reload(); });/**K**/ });
</script>
.
Autore
Me puse en contacto con la gente de la pagina que te mencione... si me responden y me pasan la info te la pasare por si en algun momento puede serte util a ti u a otro usuario que pretenda esto....
saludos
Autore
gracias por el codigo, donde lo debo insertar?
...para todo el sitio:
>> en el Paso_1 | Experto | opción: antes de cerrar la etiqueta /HEAD
.
ciao
.
>> Paso 1 - Ajustes > Estadísticas y Código > Las opciones de la sección Código >
▪Código personalizado: > Antes del cierre de la etiqueta HEAD
Autore
genial, mil gracias GENIO!!!!
Autore
Amigo eres muy modesto... el codigo que me enviaste no es similar al que yo te mostre en 100 veces superior!!!!
ya que no solo podes cambiar el color de la luz sino que ademas posee la funcion de zoom en la tipografia.
Excelente logro,realmente decirte genio es quedarme muy corto!!!!
... Hola, gracias por apreciarlo... ciao
.
Hola,
si quieres configurar la web para que sea "accesible" puedes instalar esto https://userway.org/ Esta herramienta te permitira ahumentar lso textos, cambiar los colores para los daltonicos.....
Saludos
Jorge R.M.
Autore
Estimado Jorge, no tiene ni punto de comparacion el codigo del maestro KolAsim con lo que muestras... no es l o mismo usar una aplicacion que tenes que suscribirte y dependes del codigo externo a que vos puedas poner dentro del proyecto tu propio codigo...
Reconozco que esta muy bueno el servicio pero que no se ajusta para los proyectos normales que hacemos con incomedia...
Saludos