Partage

fond d'image image et thème

Sujet résolu

11 septembre 2023 à 16:53:49

Bonjour,

Je viens vous demander de l'aide car je suis actuellement en train d'essayer de faire un changement d'image selon le thème sombre ou clair.

J'ai réussi a imposer une image de fond de site avec :

body{
  background-image: url(fond.jpg);
}

Cependant, j'aimerais mettre cette image uniquement en thème claire et mettre une autre en thème sombre.

a savoir que : l'autre image est la même mais adapter pour le thème sombre donc si on peut juste inverser les couleur ca passe aussi comme l'image est très claire (j'ai vue un sujet du forum qui inverser une image selon un bouton (que j'ai essayer d'adapter sans succès)).

J'ai essayer plusieurs choses mais 100% d'échec avec aucun petit changement.

J'ai essayer de chercher sur divers site comment changer une image de fond selon un thème mais rien du tout, juste des explication pour dire comment mettre une image en fond pour un site.

info important : j'utilise un header de bootstrap 5 qui possède un bouton de thème clair/sombre il est donc pas nécessaire dans crée un dans mon cas.

Si vous avez besoin de quoi que se soit demander moi.

En vous remerciant de votre aide.

Lamecarlate

11 septembre 2023 à 17:53:05

Bonjour,

tu utilises Bootstrap ? Comment tu gères le bouton de thème, c'est stocké quelque part, ça change un truc du genre data-bs-theme sur body ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

YakoAmane1

12 septembre 2023 à 9:04:13

Oui j'utilise un exemple de header bootstrap que j'ai modifier (logique) ainsi que quelques boutons ou autres éléments sur différentes pages.

Et aucune idée c'est intégré dans le header. J'ai déjà chercher mais j'ai pas trouver grand choses.

(En vous remerciant pour votre aide)

je vous mets le code si dessous du header :

<!doctype html>
<html lang="fr" data-bs-theme="auto">
  <head><script src="js/color-modes.js"></script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.115.4">
    <title>ActiParc V2</title>    

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

<link href="css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="icon" href="images\sitelogo.ico">
<meta name="theme-color" content="#000000">

<!-- Fin -->

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      .btn-bd-primary {
        --bd-violet-bg: #000000;
        --bd-violet-rgb: 00, 00, 00;

        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #000000;
        --bs-btn-hover-border-color: #000000;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #000000;
        --bs-btn-active-border-color: #000000;
      }
      .bd-mode-toggle {
        z-index: 1500;
      }
    </style>

  <link href="css/navbar.css" rel="stylesheet">

  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
      <symbol id="check2" viewBox="0 0 16 16">
        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
      </symbol>
      <symbol id="circle-half" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
      </symbol>
      <symbol id="moon-stars-fill" viewBox="0 0 16 16">
        <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
        <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
      </symbol>
      <symbol id="sun-fill" viewBox="0 0 16 16">
        <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
      </symbol>
    </svg>

    <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
      <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
              id="bd-theme"
              type="button"
              aria-expanded="false"
              data-bs-toggle="dropdown"
              aria-label="Toggle theme (auto)">
        <svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
        <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
      </button>
      <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
        <li>
          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
            <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#sun-fill"></use></svg>
            Light
            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
          </button>
        </li>
        <li>
          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
            <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
            Dark
            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
          </button>
        </li>
        <li>
          <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
            <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#circle-half"></use></svg>
            Auto
            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
          </button>
        </li>
      </ul>
    </div>

  <nav class="navbar navbar-expand-lg" style="background-color: #000000;" aria-label="Offcanvas navbar large" >
    <div class="container-fluid">
      <a class="navbar-brand" href="index.php" style="color:#ffffff">ActiParc V2</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbar2Label"></h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle <?php echo !empty($inv_pc)?"active":""; echo !empty($inv_ecrand)?"active":""; echo !empty($inv_export)?"active":""; echo !empty($inv_resseau)?"active":""; echo !empty($inv_autres)?"active":"" ?>" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="color:#ffffff">
              Matériels
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="inv_pc">PC</a></li>
                <li><a class="dropdown-item" href="inv_ecrand">Ecrand</a></li>
                <li><a class="dropdown-item" href="inv_reseau">Equipement Salle blanche</a></li>
                <li><a class="dropdown-item" href="inv_autres">Autres</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="inv_export">Import /  Export</a></li>
              </ul>
            </li>
            <!--
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle <?php #echo !empty($plan_etage)?"active":""; echo !empty($plan_rdc)?"active":"" ?>" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="color:#949494">
                Plan
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="plan_rdc">RDC</a></li>
                <li><a class="dropdown-item" href="plan_etage">Etage</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="atribution.php">Attribution</a></li>
              </ul>
            </li> -->
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="atribution.php" style="color:#ffffff">Position</a>
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="plan_rdc">RDC</a></li>
                <li><a class="dropdown-item" href="plan_etage">Etage</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="atribution.php">Attribution</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle <?php echo !empty($switch_distribution)?"active":""; echo !empty($planbaie)?"active":"" ?>" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="color: #ffffff;">
              Résaux
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="switch_distribution">Bracage Switch</a></li>
                <li><a class="dropdown-item" href="SW_distribution">Switch Distribution</a></li>
                <li><a class="dropdown-item" href="planbaie">Plan baie Distribution</a></li>
                <li><a class="dropdown-item" href="planbaie_telecom">Plan baie Telecom</a></li>
              </ul>
            </li>
          </ul>
          <form class="d-flex mt-3 mt-lg-0" role="search">
            <input class="form-control me-2" type="search" placeholder="rechercher ici" aria-label="">
            <button class="btn btn-outline-light" type="submit">Rechercher</button>
          </form>
        </div>
      </div>
    </div>
  </nav>

</main>
<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

-
Edité par YakoAmane1 12 septembre 2023 à 9:04:54

Lamecarlate

12 septembre 2023 à 10:10:51

Attention, tu as un </main> sans l'avoir ouvert.

Par contre, tu parles du code du header. Tu nous montres juste le début du code de ta page ou bien c'est ce que tu insères dans les autres pages (via php par exemple) ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

YakoAmane1

12 septembre 2023 à 15:44:02

Merci pour le main c'est corriger.

J'ai la page header que j'insères avec php a chaque début des autres pages a l'aide d'un

include_once("header.php");

Désoler de la réponse tardive.

Lamecarlate

12 septembre 2023 à 17:02:20

1) Tu peux donner un exemple d'un fichier dans lequel tu insères, par curiosité ?

2) Quand tu cliques sur ton bouton de changement de thème, tu vois bien la valeur de data-bs-theme (sur <html>) changer ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

YakoAmane1

12 septembre 2023 à 17:15:55

1) Bien sur voici une page avec le header :

<?php 
        $inv_pc=true;
        include_once("header.php");
        include_once("main.php");
        $count=0;
?>
<p class="h2">Inventaire PC</p>
  </blockquote>
</figure>
    </div>
    </div>
  </div>
<!-- Fin du bloque du titre -->
<?php include_once("centre.php"); ?>
<a href="AddPC.php" class="btn btn-primary" style="float:right;margin-bottom:20px;">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
        </svg>
</a>
    <?php
        $query="select * from inventaire_pc";
        $pdostmt=$pdo->prepare($query);
        $pdostmt->execute();
    ?>
<main class="flex-shrink-0">
  <div class="container">
    <table id="datatable" class="display">
    <thead>
    <tr>
            <th>Code Acticall </th>
            <th>Marque </th>
            <th>Modèle </th>
            <th>Serial Number </th>
            <th>Commentaire </th>
            <th>Prise </th>
            <th>Action </th>
        </tr>
    </thead>
    <tbody>
        <?php  while($ligne=$pdostmt->fetch(PDO::FETCH_ASSOC)):
                $count++;
        ?>
        <tr>
        <td><?php echo $ligne["CodeActicall"];?></td>
            <td><?php echo $ligne["Marque"];?></td>
            <td><?php echo $ligne["Modèle"];?></td>
            <td><?php echo $ligne["SerialNumber"];?></td>
            <td><?php echo $ligne["Commentaire"];?></td>
            <td><?php echo $ligne["prise"];?></td>
           <td>
                <a href="modifPC.php?id=<?php echo $ligne["SerialNumber"]?> " class="btn btn-success">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
                <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
                    </svg>
                </a>
                <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal<?php echo $count?>" >
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
                  <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
                    </svg>
                </button>
            </td>
        </tr>

        <!-- Modal -->
        <div class="modal fade" id="deleteModal<?php echo $count?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title fs-5" id="exampleModalLabel">Suppression</h5> <!-- ICI Il y avais un 1 et pas un 5 (au cas ou) -->
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Etes vous sur de vous?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <a href="deletePC.php?id=<?php echo $ligne["SerialNumber"] ?>" class="btn btn-danger">Confirmer</a>
            </div>
            </div>
        </div>
        </div>
            <?php endwhile; ?>
    </tbody>
</table>
  </div>
</main>

<?php 
  include_once("footer.php");
?>

2) oui

Lamecarlate

12 septembre 2023 à 19:41:01

1) OK, ça me rassure j'avais peur que les autres fichiers contiennent aussi un doctype et un body, on le voit de temps en temps ici donc je voulais être sûre qu'on aurait une structure html correct pour travailler.

2) Dans ce cas, tu peux utiliser [data-bs-theme="dark"] dans ton sélecteur C'est un attribut html comme un autre. Je conseille aussi de gérer le cas "auto" et de combiner avec la media query prefers-color-scheme. Tu vois ce que c'est ? Tu as besoin d'un code d'exemple ou bien ces infos seules te permettent d'avancer ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

YakoAmane1

13 septembre 2023 à 9:07:34

Hello,

J'avais déjà utiliser [data-bs-theme="dark"] sans succès donc je veux bien un code d'exemple pour voir comment l'utiliser correctement.

Lamecarlate

13 septembre 2023 à 9:53:39

Ce qui peut se faire :

/* mode sombre via le bouton */
[data-bs-theme="dark"] body {
    background-image: url("ton image sombre");
}

/* mode sombre via les paramètres du navigateur ou de l'OS */
@media (prefers-color-scheme: dark) {
    [data-bs-theme="auto"] body {
        background-image: url("ton image sombre");
    }
}

Ça ressemblait à quoi, ce que tu avais fait ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

YakoAmane1

13 septembre 2023 à 11:53:49

Merci beaucoup ca marche !

je le m'étais dans ma balise "<style>" comme ca : "<style data-bs-theme="dark">"

Du coup je peut faire de même pour toutes modification CSS? Comme par exemple :

[data-bs-theme="dark"] .class1 {
color : #000000;
}
[data-bs-theme="light"] .class2 {
color : #ffffff;
}

-
Edité par YakoAmane1 13 septembre 2023 à 11:54:38

Lamecarlate

13 septembre 2023 à 12:55:56

Exactement, tu peux faire ça (pas le <style>, le reste ). C'est un attribut sur html

(pense bien à garder la version auto, et à tester dans tous les cas)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

YakoAmane1

13 septembre 2023 à 13:58:44

J'avoue que l'auto mets toujours en blanc même si je mets mon navigateur en dark donc je sais pas sur quoi il se base mais tant que les deux autres fonctionnent correctement c'est le plus important.

Merci tous en cas !

(j'aurais encore galérer un moment sinon ^^')

Lamecarlate

13 septembre 2023 à 14:21:37

> J'avoue que l'auto mets toujours en blanc même si je mets mon navigateur en dark

C'est étrange. Comment tu mets ton navigateur en dark ? Quel navigateur, quel OS ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

YakoAmane1

13 septembre 2023 à 15:27:35

Dans l'onglet de personnalisation de chrome. os Windows

-
Edité par YakoAmane1 13 septembre 2023 à 15:28:50

Lamecarlate

13 septembre 2023 à 17:29:26

Ah, ça c'est le thème, pas le mode. Pour Windows, je crois que le passage au mode sombre est dans Accessibilité : ça change les fenêtres, les fonds des fenêtres, plein de trucs. Mais je connais très peu Windows, je ne saurais t'en dire plus.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

YakoAmane1

14 septembre 2023 à 9:48:15

Ok je vois, merci pour tout en tous cas !