Schimbarea contrastului unei pagini întregi

Limbaje de Programare HTML & CSS
1

Un client mi-a cerut un switch ce permite utilizatorilor să schimbe contrastul (practic inversarea culorilor).

Problema este că foarte multe secțiuni (de fapt… majoritatea!) au culori dinamice, setate de admin, deci toogle (doar) la o clasă pe body ar cam ieși din discuție. Cum aș putea aborda problema? Eu m-am gândit așa (cu refresh la pagină):

  1. Setez o clasă pe body pentru culorile default
  2. Restul culorilor, fiind servite din PHP, le inversez la generare.
  3. Păstrez într-un cookie (sau în user meta) starea switch-ului.

Vede cineva o abordare mai elegantă de atât?

2

E destul de impractic cu refresh, plus ca se pot pierde alte date, in functie de ce continut dinamic are pagina. Dar se poate face cu AJAX si json. De exemplu, pentru fiecare caz setezi un ID si atribui valorile dorite, dupa care:

$.getJSON("ajax/contrast.php", { id: cevaID }, function (result) { 
$('#bg').css('background-color', result.bg);
$('#font').css('font-color', result.font);
});

Dupa care in contrast.php:

eacho json_encode(array('font'=>$font,'bg'=>$bg));
//Din care echo arata asa: { "font": "Arial", "bg": "#000000" }
3

Hmm, mi-ai dat o idee! Generez HTML-ul în felul următor:

<div style="background:#fff" data-alternate-bg="#000" data-alternate-isdark="1">

Cu jQuery voi căuta fiecare $('[data-alternate-bg]') și voi ajusta background (și culoarea textului) dinamic și voi trimite un request la server să seteze cookie, să nu-și uite starea.

1 Like
4

Sau asa, da. :slight_smile: Metoda mea e mai complexa, dar mai redundanta. A ta e mai rapida.

5

Revin cu soluția (găsită cu mult timp înainte, dar am uitat de acest topic):

  1. cea mai importantă chestie a fost să generez un id pentru fiecare element ce-l voiam inversat. Cum foloseam mustache, pe lângă conținutul propriu-zis, am trimis și un ID generat (e.g. id-198273123)
  • La randare, puneam și un tag style în care puneam culorile corespunzătoare.
  • Cu JS făceam toggle pe body la clasa has-inverted-colors.

Totul arăta cam așa:

<style type="text/css">
  #id-198273123 .foo { background:black; }
  .has-inverted-colors #id-198273123 .foo { background:white; }
</style>

<div id="id-198273123">
  <div class="foo"></div>
</div>

Atât. :blush:

6

Este o solutie similara cu “how to theme a component”

<div class="component theme-inverted"> ... </div>

/* Theme: default */
.component { }
.component--item { }

/* Theme: inverted */
.component.theme-inverted { }
.component.theme-inverted .component--item { }

/* Theme: rainbow */
.component.theme-rainbow { }
.component.theme-rainbow .component--item { }

In .theme-[name] ... se recomanda doar schimbarea declaratiilor vizuale nu si de pozitionare.

1 Like
7

Si eu as merge pe solutia lui @navaru. Pana sa citesc raspunsul lui, voiam sa scriu ceva similar. Practic setezi un “state” , iar in scss/css pui si valorile in caz de state-ul respectiv.

8

Ăsta a fost planul inițial. Dar am avut de ales: o clasă schimbată pe câteva zeci de elemente VS o clasă pe body :smile:

9

Ai mai putea sa faci o mica functie JS care sa-ti editeze CSS-ul incarcat astfel incat fiecarei culori (tradusa in HSB) sa-i faca saturatia si luminozitatea 100-valoarea_actuala. Asta ar fi metoda cea mai quick’n’dirty la care ma pot gandi.
Cum, mai exact, faci schimbarea pe toate elementele CSS incarcate, este o cu totul alta intrebare. Dar, macar, nu mai ai de luat la purecat fiecare culoare in parte…

10

Dirty? Da. Quick? Mai puțin. Gândește-te că trebuie să parsezi fiecare element din DOM…

11

Nu fiecare element existent in pagina? Dar, macar, se intampla dupa ce DOM-ul s-a terminat de incarcat.