Optiune tema css

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
adrian_ady
Mesaje: 80

Optiune tema css

Salut,
stie cineva cum se face corect optiunea (preferinta utilizatorului) de afisare a site-ului in doua teme distincte; sa zicem versiunea1= LIGHT, versiunea2= DARK ? Banuiesc ca trebuie avute doua syle-uri.css distincte (si asta e usor) dar cum se face sa se incarce separat si sa se pastreze optiunea ?
andras Mesaje: 430
Nu stiu daca vorbesc prostii sau nu, eu sint mai nou in acest domeniu, dar ar trebui sa fie la fel ca optiunea Limba de afisare. Eu am salvat in baza de date limba de afisare (implicita) a site-ului ca o proprietate a user-ului. La conectarea la BD preiau in SESSION aceasta proprietate si in functie de valoarea ei setez functia care stabileste in ce limba se deschide.
MarPlo Mesaje: 4343
Salut
Se poate face asa, cu html si javascript:
- se adauga un id la tag-ul html <link> care preia fisierul css.
- se creaza un <select> cu optiunile pt teme /fisiere css.
- un cod javascript care preia valoarea aleasa din <select> si o modifica pe cea din tagul <link>, apoi o adauga /salveaza in browser (in localStorage).
- La incarcarea paginii se verifica daca exista localStorage cu adresa fisierului css, daca exista, o adauga in tag-ul <link> pt. preluare css.
Uite si exemplu:

Cod: Selectaţi tot

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/light.css" rel="stylesheet" type="text/css" id="css_id" />
</head>
<body>

<select id="change_css">
  <option value="css/light.css">Light</option>
  <option value="css/dark.css">Dark</option>
</select>
  
<script>
// if the css option is saved in browser, use it
if(localStorage.getItem('css_teme')) document.getElementById('css_id').href = localStorage.getItem('css_teme'); 

// when the select option is changed
document.getElementById('change_css').addEventListener('change', function(e) {
  // change the used css file
  document.getElementById('css_id').href = this.value;

  // stores the value in browser's localstorage
  localStorage.setItem('css_teme', this.value);
});
</script>

</body>
</html>
adrian_ady Mesaje: 80
Am incercat insa nu se poate reveni la optiunea precedenta odata ce s-a optat pentru una din ele iar selectul nu afiseaza ultima optiune. Cred ca o versiune radio button ar fi mai potrivita, la refresh sau schimb de pagina ar mentine clar optiunea dorita.
MarPlo Mesaje: 4343
In acest exemplu se schimba optiunea din <select> cu cea salvata in browser.

Cod: Selectaţi tot

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/light.css" rel="stylesheet" type="text/css" id="css_id" />
</head>
<body>

<select id="change_css">
  <option value="css/light.css">Light</option>
  <option value="css/dark.css">Dark</option>
</select>
 
<script>
// if the css option is saved in browser, use it
if(localStorage.getItem('css_teme')) {
  document.getElementById('css_id').href = localStorage.getItem('css_teme');

  // change the selected option in select
  var sel_op = document.getElementById('change_css').querySelectorAll('option');
  for(var i=0; i<sel_op.length; i++) {
    if(sel_op[i].value == localStorage.getItem('css_teme')) {
      sel_op[i].setAttribute('selected', 'selected');
      break;
    }
  }
}

// when the select option is changed
document.getElementById('change_css').addEventListener('change', function(e) {
  // change the used css file
  document.getElementById('css_id').href = this.value;

  // stores the value in browser's localstorage
  localStorage.setItem('css_teme', this.value);
});
</script>

</body>
</html>
- Daca vrei cu radio buton sau altfel, incearca sa faci, ca un exercitiu de invatare.
adrian_ady Mesaje: 80
Eh, asa mai merge, functioneaza 100%.
Toate cele bune si Sarbatori Fericite!

Edit:
Off, am doua imagini .gif pe care nu pot sa le fac cu background transparent sa fie compatibile cu ambele css-uri. Ar trebui sa le pot afisa cu un conditional PHP care sa aleaga ce imagine sa se descarce in functie de optiunile Dark si Light si nu stiu.
MarPlo Mesaje: 4343
Datele salvate in browser in localStorage nu pot fi preluate in php.
Mai simplu ar fi sa adaugi imaginile ca background in fisierele css, cu proprietatea:

Cod: Selectaţi tot

#idul { background-image:url('cale/imagine.png'); }
Sau, mai complex, pe partea de client side poti lucra cu javascript. Asa cum se modifica adresa fisierului css se poate schimba si o imagine, te poti folosi de un id adaugat in tagul html, si metoda JS getElementById().
Daca nu stii javascript, poti incerca sa inveti.

Subiecte similare