[Résolu] Remplacer un css avec un script - Programmation - JavaScript

Pierredu16500 Le 29 septembre 2017 à 11:01 (Édité le 25 janvier 2019 à 17:54)

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 !

Balatharas Le 30 septembre 2017 à 13:45

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 Le 30 septembre 2017 à 14:30 (Édité le 30 septembre 2017 à 14:31)

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 Le 5 octobre 2017 à 17:01

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 😉 si ce n'est pas le cas normalement mon code plus haut devrais être correct 😋

Pierredu16500 Le 5 octobre 2017 à 18:28

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

Remplacer un css avec un script

Échange

Articles / Vidéos

Ressources