Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: Pierredu16500
Ce topic a été résolu
Auteur Sujet: Remplacer un css avec un script

Pierredu16500

Messages: 5

Bonjour, je souhaiterai faire un site avec un mode Light et un mode Night, un peu comme Twitter. J'ai ma version Light, mais je coince au niveau de mon code pour switcher au mode Night.
mon lien pour change de mode:
<li id="lune" class="nav-item">
 <label class="form-check-label ">
  <a id="checkbox" href="" onclick="changeCss()"><i class="tiny material-icons">brightness_3</i></a>
 </label>
</li>
                   
mon script:
function changeCss() {
  var on = document.getElementById("checkbox").click();
  if (on == 1) {
    document.getElementById('night').disabled  = true;
    document.getElementById('light').disabled  = false;
  } else {
    document.getElementById('light').disabled  = true;
    document.getElementById('night').disabled  = false;
  }
}
mon css:
<link rel="stylesheet" href="css/stylesColor.css" id="light"/>
<link rel="alternate stylesheet" href="css/stylesNight.css" id="night"/>
Merci de votre aide !
Publicité

Balatharas

Messages: 545

Salut, pour simplifier le tout moi j'aurais utilisé une session en php genre:
En mode light (mode de base) $_SESSION['csstype'] = true;
En mode night (mode secondaire) $_SESSION['csstype'] = false;

Ton css:
<?php if($_SESSION['csstype']) {
   $textsubmit = "Mettre en mode night";
?>
   <link rel="stylesheet" href="css/stylesColor.css" id="light"/>
<?php } else {
   $textsubmit = "Mettre en mode light";
?>
   <link rel="stylesheet" href="css/stylesNight.css" id="night"/>
<?php } ?>
Ensuite pour changer le mode:
<?php
if(isset($_POST['changemode'])) {
   $csstype = $_SESSION['csstype'];
   if($csstype == true) {
      $csstype = false;
   }      
   if($csstype == false) {
      $csstype = true;
   }
}
?>
<form method="POST">
   <input type="submit" name="changemode" value="<?= $textsubmit ?>" />
</form>
J'ai pas tester le code mais il me paraît bon

Pierredu16500

Messages: 5

Salut, merci ! Je vais tester, mais sinon j'ai réussi !
JS:
function lightTheme() {
    $('#themeLink').attr('href', 'css/light.css');
}
function darkTheme() {
    $('#themeLink').attr('href', 'css/night.css');
}
<link rel="stylesheet" href="css/styles.css"/>
<link rel="stylesheet" href="css/light.css" id="themeLink"/>
<a class="nav-link" id="dark" href="" onclick="darkTheme()">nuit</a>
<a class="nav-link" id="light" href="" onclick="lightTheme()">jour</a>

Balatharas

Messages: 545

Salut, oui tu as réussi, mais est-ce que quand tu sélectionnes un mode et que tu changes de page le mode est enregistré ? C'est pour ça que je t'ai parler de session Clin d'oeil si ce n'est pas le cas normalement mon code plus haut devrais être correct Tire la langue

Pierredu16500

Messages: 5

Salut, effectivement ça ne garde pas en mémoire le choix du mode ! Du coup, je vais opter pour ton code, merci ! 


Veuillez vous connecter ou créer un compte pour poster une réponse