Dark Mode - Appliquer le thème à la PA (page HTML)

[Yunie16]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis l'installation du Dark Mode
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Re-bonjour !

Toujours dans mon installation du dark mode (ça va devenir un thread...), j'ai tenté d'appliquer le thème à ma PA qui est isolée dans une page HTML, mais je n'ai pas réussi. J'ai posé le code css dans les balises style au début de la page, mais le seul résultat est de faire planter toute ma PA ^^' Y aurait-il une subtilité que je ne connaisse pas ?

Le bout de css qui correspond aux changements de couleur déjà effectués :

Code:

/* VARIABLE DU MODE INVERSE (ici mode sombre) */
 [data-color-scheme="dark"] {
    --fond-blocs: #333;
    --couleur-texte: #fff;
    --couleur-secondaire: #605273;
  a {color:#fff;}

}

et la page html pour la pa :

Code:

<meta charset="utf-8" />  <title>Page d'accueil</title>  <link rel="preconnect" href="https://fonts.gstatic.com" />  <link href="https://fonts.googleapis.com/css2?family=Noticia+Text:wght@400;700&display=swap" rel="stylesheet" />  <link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" /><link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet"  /><style>

:root
{
   --fond-forum: #FAFBFA;
   --fond-blocs: #fafafa;
   --couleur-secondaire: #5B5465;
   --couleur-tertiaire: #FAF9FA;
   --police-texte: cambria;
    --couleur-degrade: linear-gradient(#C4C9FF, #C4C9FF, #CB9CFF, #CB9CFF);
  --couleur-degrade2: linear-gradient(to right,#CB9CFF, #CB9CFF, #C4C9FF, #C4C9FF);
  --couleur-texte: #30283E;

}

#page-accueil-a
{
   width: 950px;
   height: 403px;
   display: grid;
   grid-template-columns: 400px 270px 266px;
   grid-template-rows: 64px 108px 123px 83px;
   box-sizing: border-box;
   grid-gap: 8px 7px;
   margin: auto;
}

#page-accueil *
{
   box-sizing: border-box;
}

.bann-forum
{
   grid-column: 1 / 2;
   grid-row: 1 / 5;
   background: var(--fond-blocs);
   border: 0px solid rgba(0,0,0,0.2);
   padding: 10px;
        border-radius: 6px;
}

.contexte-accueil
{
   grid-column: 2 / 3;
   grid-row: 1 / 3;
   background: var(--fond-blocs);
   border: 0px solid rgba(0,0,0,0.2);
   padding: 15px;
   position: relative;
        border-radius: 6px;
}

.contexte-accueil:before
{
   width: 248px;
   height: 90%;
   content: " ";
   background: url(https://www.zupimages.net/up/23/39/88zi.png);
        border-radius: 6px;
   position: absolute;
   top: 10px;
   left: 10px;
        background-size: 100% auto;
        filter: grayscale(40%);
}

.contexte-accueil > p
{
   position: relative;
   z-index: 999;
   background: var(--fond-blocs);
   overflow:auto;
   width: 85%;
   height: 80%;
   margin: 15px auto;
   text-align: justify;
   padding: 10px 25px;
   font-size: 11px;
   box-sizing: border-box;
   color: var(--couleur-secondaire);
   font-family: Gill Sans MT;
        border-radius: 6px;
}

.contexte-accueil span
{
font-family: 'Sacramento', cursive;
color:#C7B2FF;
font-size:27px;
}


.pls
{
   grid-column: 2 / 3;
   grid-row: 3/ 4;
   background: var(--fond-blocs);
   border: 0px solid rgba(0,0,0,0.2);
   margin: 0;
   padding: 15px 20px 18px;
   box-sizing: border-box;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
        border-radius: 6px;
}

.pls > li
{
   list-style-type: none;
   display: block;
   border: 0px solid rgba(0,0,0,0.2);
   font-family: var(--police-texte);
   text-transform: uppercase;
   font-size: 9px;
   height: 37px;
   width: 72px;
   line-height: 25px;
   padding: 0 5px;
   box-sizing: border-box;
        position:relative;
        left:-20px;


}

.pls li a
{
   text-decoration: none;
   color: var(--couleur-tertiaire);
   font-weight: 700;
       margin-left: 15px;
        background-size: 140% auto;
        filter: grayscale(20%);     
}

.pls:after
{
   content: " ";
   width: 90%;
   height: 5px;
   background: var(--couleur-degrade2);
   position: absolute;
   bottom: 7%;
      border-radius: 10px;
left:15px;
}

.cred-part
{
   grid-column: 2 / 3;
   grid-row: 4/5;
}

.credit-codage
{
   width: 268px;
   height: 36px;
   background: url(https://www.zupimages.net/up/23/39/88zi.png);
   border: 6px solid var(--fond-blocs);
   outline: 0px solid rgba(0,0,0,0.2);
   box-sizing: border-box;
   margin-left:1px;
   text-align: center;
   padding-top:5px;
        border-radius: 8px;
}

.credit-codage > span
{
   text-align: center;
   background: var(-- );
   font-family: var(--police-texte);
   font-size: 10px;
   text-align: center;
   text-transform: uppercase;
   font-weight: 700;
   padding: 0 20px;
   color: var(--couleur-tertiaire);
        border-radius: 6px;
}
   
.credit-codage a {
       text-decoration: none;
       color: var(--couleur-tertiaire);
}
       
   

.partenariats-icones
{
   width: 100%;
   position: relative;
   display: flex;
   margin-top: 6px;
        border-radius: 6px;
    background-size: auto;
}

.partenariats-icones:after
{
   width: 0px;
   height: 100%;
   background: var(--couleur-degrade);
   content: " ";
   position: absolute;
   right: 0;
        border-radius: 6px;
}

.partenariats-icones a
{
   background: var(--fond-blocs);
   padding: 4px 4px;
   display: block;
   border: 0px solid rgba(0,0,0,0.2);
   text-align: center;
   box-sizing: border-box;
   margin-right: 3px;
        border-radius: 6px;
      background-size: 100% auto;

}

.partenariats-icones a img
{
   padding-top: 2px;
      background-size: 100% auto;
        filter: grayscale(10%);
        border-radius: 8px;
}

.nouveautes-accueil
{
   -ms-grid-column: 3;
   -ms-grid-column-span: 1;
   grid-column: 3 / 4;
   -ms-grid-row: 1;
   -ms-grid-row-span: 1;
   grid-row: 1 / 2;
   background: var(--fond-blocs);
   border: 0px solid rgba(0,0,0,0.2);
   font-family: cambria;
   font-size: 10px;
   box-sizing: border-box;
   padding: 20px 30px;
   overflow: auto;
   color: var(--couleur-secondaire);
        border-radius: 6px;
}

.nouveautes-accueil > span
{
   display: block;
   position: relative;
   font-size: 11px;
   font-weight: 700;
        font-family: Sacramento;
        color:#C7B2FF;
}

.nouveautes-accueil > span:before
{
   content: " ";
   width: 35px;
   height: 0px;
   background: var(--couleur-degrade2);
   position: absolute;
   top: -10px;
   left: -5px;
}

.nouveautes-accueil p
{
   margin: 0 0 25px 0;
}

.nouveautes-accueil p:last-child
{
   margin: 0;
}

/*La scrollbar elle-même*/
::-webkit-scrollbar {
  width: 10px; /*Largeur pour les scrollbars verticales*/
  height: 10px; /*Hauteur pour les scrollbars horizontales*/
  border-radius: 6px;
  border: 5px solid #FAFAFA;
}
/*L'espace sur lequel la barre de la scrollbarre défile*/
::-webkit-scrollbar-track {
  background: #FAFAFA;
  width: 10px; /*Largeur pour les scrollbars verticales*/
  height: 10px; /*Hauteur pour les scrollbars horizontales*/
  border-radius: 6px;
  border: 5px solid #FAFAFA;
}
/*La barre de la scrollbar*/
::-webkit-scrollbar-thumb {
  background-image: linear-gradient(180deg, #C4C7FF 0%, #CAA0FF 99%);
  width: 10px; /*Largeur pour les scrollbars verticales*/
  height: 10px; /*Hauteur pour les scrollbars horizontales*/
  border-radius: 6px;
    border: 3px solid #FAFAFA;
}


/*À voir dans les pseudo-class plus bas*/
::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg, #C4C7FF 0%, #CAA0FF 99%);
}
::-webkit-scrollbar-thumb:active {
  background-image: linear-gradient(180deg, #C0C2CE 0%, #D0BAD1 99%);
}

.staff-accueil
{
   -ms-grid-column: 3;
   -ms-grid-column-span: 1;
   grid-column: 3/4;
   -ms-grid-row: 2;
   -ms-grid-row-span: 1;
   grid-row: 2/ 3;
   display: flex;
    gap: 5px;

}

.un-staff
{
   flex: 1 1 auto;
   width: 62px;
   margin-top: -1px;
   height: 108px;
   border: 5px solid var(--fond-blocs);
   outline: 0px solid rgba(0,0,0,0.2);
    outline-offset: -1px;
   text-align: center;
   box-sizing: border-box;
   padding-top: 35px;
    background: url(https://64.media.tumblr.com/6eaf6c44c35ec5054dcabe334dd90992/2fae3887a66a5132-40/s400x600/c74f506558ac0f62a4eb161fbeffff00e72f62af.gif); /** image du staffeux à gauche **/
        background-size: 170% auto;
        filter: grayscale(50%);
        border-radius: 8px;
   
}
   
    .un-staff:nth-of-type(2) {
    background: url(https://i.pinimg.com/originals/24/4b/52/244b5227dd3490a2edbd1e0d349ade06.gif); /** image du staffeux au centre **/
    background-size: 130% auto;
}

.un-staff:nth-of-type(3) {
    background: url(https://64.media.tumblr.com/3d1a94964bee352b8b46b799cd68913c/d34ad7691bdbd35a-f2/s400x600/ada702ef854e42cb8fc772c87431b000c5e09944.gif); /** image du staffeux à droite **/
    background-size: 130% auto;
}

.un-staff:nth-of-type(4) {
    background: url(https://www.zupimages.net/up/23/40/h2jl.gif); /** image du staffeux à droite **/
    background-size: 150% auto;
}

.un-staff h2
{
   font-family: var(--police-texte);
   color: var(--couleur-tertiaire);
   font-size: 10px;
   text-align: left;
   box-sizing: border-box;
   padding: 20px 5px;
   text-transform: uppercase;
   margin: 0;
}

.un-staff h2 span
{
   display: block;
   color: var(--couleur-secondaire);
   text-transform: uppercase;
   margin-top: -1px;
}

.un-staff h2 span a
{
   color: var(--couleur-tertiaire);
   text-decoration: none;
   font-size: 8px;
   opacity: 0.8;
   margin-right: 4px;
   transition:all 0.5s;

}

.un-staff span a:hover
{
   opacity: 1;
   margin-left: 2px;

}


.predef-pa
{
   -ms-grid-column: 3;
   -ms-grid-column-span: 1;
   grid-column: 3 / 4;
   -ms-grid-row: 3;
   -ms-grid-row-span: 1;
   grid-row: 3 / 4;
   box-sizing: border-box;
   padding-top: 5px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
      position:relative;
        margin-top:5px;
        border-radius: 6px;
        background: var(--fond-blocs);
   border: 0px solid rgba(0,0,0,0.2);
   margin: 0;

   }

.credits-pa
{
   width: 150px;
   height:85px;
   margin:auto;
   overflow:auto;
   font-size: 11px;
   color:#30283E;
   margin: 15px 22px;

}

.credits-pa span
{
font-family: 'Sacramento', cursive;
color:#C7B2FF;
font-size:25px;
}

.topsites-pa
{
   width: 70px;
   height:70px;
   margin:auto;
   overflow:auto;
   font-size: 11px;
   color:#C2C0BE;

}

.topsites-pa li
{
   list-style-type:none;
   margin-top:6px;
}
   
.predef-pa a
{
   width: 20px;
   height: 20px;
   border: 0px solid rgba(0,0,0,0.2);
        border-radius: 6px;
}

.predef-pa > a img
{
   border: 4px solid var(--fond-blocs);
}


.liens-importants
{
   -ms-grid-column: 3;
   -ms-grid-column-span: 1;
   grid-column: 3 / 4;
   -ms-grid-row: 4;
   -ms-grid-row-span: 1;
   grid-row: 4 /5;
   background: var(--fond-blocs);
   border: 0px solid rgba(0,0,0,0.2);
   margin: 0;
   padding: 5px 20px 18px;
   box-sizing: border-box;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
        border-radius: 6px;

}

.liens-importants > li
{
   list-style-type: none;
   display: block;
   border: 0px solid rgba(0,0,0,0.2);
   font-family: var(--police-texte);
   text-transform: uppercase;
   font-size: 9px;
   height: 22px;
   width: 110px;
   line-height: 25px;
   padding: 0 5px;
   box-sizing: border-box;
        position:relative;


}

.liens-importants li a
{
   text-decoration: none;
   color: var(--couleur-texte);
   font-weight: 700;
       margin-left: 15px;

       
}

.liens-importants li:before
{
   content: " ";
       width: 10px;
       height: 9px;
       background: url(https://www.zupimages.net/up/23/40/na3u.png);
        background-size: 100% auto;
       background-position: center;
       margin-right: 20px;
       position: absolute;
       top: 9px;
       background-repeat: no-repeat;

}

  </style>    <div id="page-accueil-a">
                                                    
   <div class="bann-forum">
                                <a href="https://dwell-test-forum.forumactif.com/" target="_parent"><img style="object-fit:cover;border-radius:6px;filter: grayscale(40%);" src="https://www.zupimages.net/up/23/39/x8hg.gif" alt="bannière" /></a>                         
   </div>
                                                    
   <div class="contexte-accueil">
                                                       
      <p>
                  ✧ ・・<span> contexte </span><br/> Séoul, capitale de la Corée, peuplée de gens aux <ii> ambitions et rêves </ii> multiples et différents. Vous vous baladez parmi eux, le regard déterminé ou, au contraire, voguant avec hésitation sur les bâtiments qui vous entourent. Jusqu'à ce que vos yeux tombent sur une carte de visite abandonnée au sol, qui représente ce que vous cherchiez, consciemment ou non. Dessus, une inscription : <em>Nous vous offrons une deuxième chance.</em><br />Depuis quelques mois, l'entreprise <strong>Second Chance</strong> a installé ses bureaux à Séoul, où elle s'est donnée pour mission d'offrir une deuxième chance à tous ceux qui en ont besoin. Que vous ayez perdu votre travail, vécu une rupture compliquée, ou soyez en demande de réinsertion sociale, les portes de l'agence vous sont ouvertes, peu importe votre histoire ou votre passif.                         
      </p>
                                                       
   </div>
                                                    
   <ul class="pls">
                                                                                         
      <li>
                                                   <a target="_parent" href="#"><img style="height:33px;width:72px;object-fit:cover;border-radius:6px;" src="https://64.media.tumblr.com/ba90f7d8fe267c942029c5e87866140b/610615d10902df28-08/s1280x1920/3e860ef413d8a1ac71f2fb3ff583e69c9cec1259.gif" /></a>                                         
      </li>
                                                                                         
      <li>
                                                   <a target="_parent" href="#"><img style="height:33px;width:72px;object-fit:cover;border-radius:6px;" src="https://64.media.tumblr.com/342de334d48531b7eafb4763d45b3486/fe7c5571c8a1d125-cb/s250x400/ee8f448017f6f785292435afd62a482f2c8fa67e.gif" /></a>                                         
      </li>
                                                                                         
      <li>
                                                   <a target="_parent" href="#"><img style="height:33px;width:72px;object-fit:cover;border-radius:6px;" src="https://64.media.tumblr.com/73e075c3a8baa8fcebaeb28e7494367c/0fe20454e011ecde-ea/s250x400/e9d74db2806fe0a75ac52b16f481a0254b7c5ec7.gif" /></a>                                         
      </li>
                                                                                         
      <li>
                                                   <a target="_parent" href="#"><img style="height:33px;width:72px;object-fit:cover;border-radius:6px;" src="https://64.media.tumblr.com/446a4de55e47cbdcfac524ebf9b7fb6b/8b085bc51e59af57-4a/s400x600/016111967507f3fbc7cb4d9366885f7b2e110ed8.gif" /></a>                                         
      </li>
                                                                                         
      <li>
                                                   <a target="_parent" href="#"><img style="height:33px;width:72px;object-fit:cover;border-radius:6px;" src="https://64.media.tumblr.com/46a8e5242cce3b262ec3a9c1e7c7a708/8b085bc51e59af57-dd/s400x600/44f8de12a691e12e97ae84a3f2b87b36286949cf.gif" /></a>                                         
      </li>
                                                                                         
      <li>
                                                   <a target="_parent" href="#"><img style="height:33px;width:72px;object-fit:cover;border-radius:6px;" src="https://64.media.tumblr.com/55d177fabeee01251c8bc4950369127b/8b085bc51e59af57-3e/s400x600/65ef5c06ca50ccca3fd3957e5804c24e39462cf8.gif" /></a>                                         
      </li>
                                                                                         
   </ul>
                                                                
   <div class="cred-part">
                                                       
      <div class="credit-codage">
                                                   <span> Nos copains ♡ Devenir partenaires ? </span>                         
      </div>
                                                       
      <div class="partenariats-icones">
                                   <a href="#" target="_parent"><img style="height:30px;width:57px;" src="https://64.media.tumblr.com/88e6c09ecdb6e94a14f0822553822c70/4881cc55c1a79097-d4/s400x600/f9a807c03ce400963f611ce70cd237793245a447.gif" alt="icone" /></a> <a href="#" target="_parent"><img style="height:30px;width:57px;" src="https://64.media.tumblr.com/279633ebdcd558be989280dee339f330/4881cc55c1a79097-7b/s400x600/dd2b1ad8c4bb331c93127476ead541823b2fa437.gif" alt="icone" /></a> <a href="#" target="_parent"><img style="height:30px;width:57px;" src="https://64.media.tumblr.com/5e0fa11f5c71598907cb398c98f82520/tumblr_pf7aonkrw41u8ky97o6_r1_400.gif" alt="icone" /></a> <a href="#" target="_parent"><img style="height:30px;width:57px;background-size:auto;" src="https://64.media.tumblr.com/7e7379301ecdd949ae748c595975276d/tumblr_p2ru7dTfvx1qifhqeo8_400.gif" alt="icone" /></a>                         
      </div>
                                                       
   </div>
                                                    
   <div class="nouveautes-accueil">
                                <span><img src="https://www.zupimages.net/up/23/39/wov7.png" style="height:25px;width:25px;" />&nbsp &nbsp N.E.W.S </span>                         
      <p>
                  <b> 01/10/23 </b> - Version 1.1 >> ici << 
                  <br> <b>01/09/23</b> - Ouverture du forum >> ici <<
                  <br><b>17/08/23</b> - Création du forum <br>
                  <b>16/08/23</b> - Naissance du concept  <br>
      </p>
                                                   
      <p>
                                                          
      </p>
                                                       
   </div>
                                                    
   <div class="staff-accueil">
                                                       
      <div class="un-staff">
                                                          
         <h2>
                                      Bubulle <span> <a href="#" target="_parent">mp</a> <a href="#" target="_parent">profil</a> </span>                         
         </h2>
                                                          
      </div>
                                                       
      <div class="un-staff">
                                                          
         <h2>
                                      Opiacat <span> <a href="#" target="_parent">mp</a> <a href="#" target="_parent">profil</a> </span>                         
         </h2>
                                                          
      </div>
                                     
      <div class="un-staff">
                                                                                  
         <h2>
                                                  Yunie <span> <a href="#" target="_parent">mp</a> <a href="#" target="_parent">profil</a> </span>                                     
         </h2>
                                                                                  
      </div>
      <div class="un-staff">
                                                                                  
         <h2>
                                                  b.Yoshi <span> <a href="#" target="_parent">mp</a> <a href="#" target="_parent">profil</a> </span>                                     
         </h2>
                                                                                  
      </div>
                                                       
   </div>
                                                    
   <div class="predef-pa">
                                                               
      <div class="credits-pa">
                  ✧ ・・  <span> crédits</span> <br />les credits du <i> forum blabla </i> bla les credits du forum blabla bla les credits du forum blabla bla les credits du forum blabla bla les credits du forum blabla bla les credits du forum blabla bla les credits du forum blabla bla les credits du forum blabla bla               
      </div>
                                   
      <div class="topsites-pa">
                                      
         <li>
                            <a href="#" target="_parent"><img style="height:20px;width:20px;" src="https://www.zupimages.net/up/23/39/qorc.png" /></a> <a href="#" target="_parent"><img style="height:20px;width:20px;" src="https://www.zupimages.net/up/23/39/qorc.png" /></a>               
         </li>
                                      
         <li>
                            <a href="#" target="_parent"><img style="height:20px;width:20px;" src="https://www.zupimages.net/up/23/39/qorc.png" /></a> <a href="#" target="_parent"><img style="height:20px;width:20px;" src="https://www.zupimages.net/up/23/39/qorc.png" /></a>               
         </li>
                                      
      </div>
                                                         
   </div>
                                                    
   <ul class="liens-importants">
                                                                               
      <li>
                                             <a href="#" target="_parent">Contexte</a>                                   
      </li>
                                                                               
      <li>
                                             <a href="#" target="_parent">Règlement</a>                                   
      </li>
                                                                               
      <li>
                                             <a href="#" target="_parent">Bottin</a>                                   
      </li>
                                                                               
      <li>
                                             <a href="#" target="_parent">Partos & Invités</a>                                   
      </li>
                                                                               
      <li>
                                             <a href="#" target="_parent">Les liens utiles</a>                                   
      </li>
                                                                               
      <li>
                                             <a href="#" target="_parent">PLS & Scénarios</a>                                   
      </li>
                                                                               
   </ul>
</div>

PS : je viens de tester dans les templates aussi, notamment pour les pages d'édition de profil, de MP etc... et pareil, les modifs ne se font pas (mais au moins ça ne casse rien ici)

Merci d'avance !

[Toryudo]

Bonjour !

Alors, pourquoi ça ne fonctionne pas :

Quand vous écrivez [data-color-scheme="dark"], c'est comme si vous écriviez html[data-color-scheme="dark"] : on cherche une propriété spécifique dans la balise <html>. Sur votre page d'accueil, il y a deux balises <html> : la balise <html> de la page, et la balise <html> de l'iframe. Quand vous cliquez sur le bouton du Dark mode, vous modifiez le <html> de la page d'accueil, mais pas le <html> de l'iframe. Pour l'iframe, on n'est donc pas passé en dark mode, c'est pour cette raison qu'il ne se passe rien.

Deux choses à faire :
- ajouter un id à l'iframe : par exemple, id="iframepa"
- ajouter cette ligne de JavaScript dans votre code qui gère le dark mode :

Code:

$("#iframepa").contents().find("html").attr('data-color-scheme', $('html').attr('data-color-scheme'))

Il va falloir placer cette ligne juste à la suite du code qui change la valeur de l'attribut "data-color-scheme".
Ça va permettre de modifier le <html> de l'iframe juste après le <html> de la page, histoire de garder la même valeur pour les deux.

Je ne peux pas trop tester, je vous laisse tenter ?
Attention : je crois que ça ne fonctionne que si la page et l'iframe pointent sur le même site, https://dwell-test-forum.forumactif.com chez vous en l’occurrence. On ne peut pas toucher un iframe qui pointe sur un autre site.

[Yunie16]

Merci pour les réponses **
Dans l'idée je comprends ce que je dois faire, mais je n'utilise jamais des iframe donc l'id à ajouter je ne vois pas où le faire en fait ? Je n'ai pas d'iframe dans la PA et je ne sais pas comment en créer du coup ?

[Toryudo]

Bonjour !

En fait, quelque part (dans un Template j'imagine), vous avez ceci :

Code:

<iframe src="https://dwell-test-forum.forumactif.com/h1-page-accueil-dwell" marginwidth="0" height="405" width="100%" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0"></iframe>

Et il faut juste ajouter un id="iframepa", donc comme ceci :

Code:

<iframe id="iframepa" src="https://dwell-test-forum.forumactif.com/h1-page-accueil-dwell" marginwidth="0" height="405" width="100%" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0"></iframe>

Il n'y a pas spécialement d'ordre dans les attributs d'une balise, j'ai mis l'id en premier pour l'exemple !

[Yunie16]

J'ai trouvé, merci !

Par contre, je pense que je n'ai pas bien compris où mettre ce bout de code :

Code:

$("#iframepa").contents().find("html").attr('data-color-scheme', $('html').attr('data-color-scheme'))

J'ai essayé dans le CSS à la suite du code [data-color-scheme=dark] (avec et sans guillemets ; avec et sans html devant ; dans des {}...) et ça ne change rien, j'ai essayé direct dans la page html de la PA mais ça la casse de nouveau, donc je ne vois pas trop ^^'

Pour le moment j'ai ça :

Code:

/* VARIABLE DU MODE INVERSE (ici mode sombre) */
 [data-color-scheme="dark"]{
    --fond-blocs: #333;
    --couleur-texte: #fff;
    --couleur-secondaire: #605273;
    --couleur-tertiaire: #8883c9;
    --couleur-degrade:linear-gradient(#535aa6, #535aa6, #775c96, #775c96);
    --couleur-degrade2:linear-gradient(to right,#775c96, #775c96, #535aa6, #535aa6);
  --white:#444;
  --black:#fff;
  --blanc-gris:#333;
  --blue:#4d54a1;
  --bluer:#3d459c;}

[data-color-scheme="dark"] a {color:#fff;}

html[data-color-scheme=dark], [data-color-scheme=dark] body {   background: url(https://i.pinimg.com/564x/bf/58/65/bf58654a0961d804ee0a4f741821e70d.jpg);background-attachment:fixed!important;background-repeat:repeat!important;}

html[data-color-scheme=dark] $("#iframepa").contents().find("html").attr('data-color-scheme', $('html').attr('data-color-scheme'))

[Jawn]

Alors pour ton bout de code, soit tu le mets entre balise :

Code:

<script></script>

soit tu le mets directement dans le JS de ton forum ! C'est du Javascript pas du CSS ou du HTML !

[Yunie16]

J'avais remarqué, d'où mon problème : je gère pas du tout le Javascript ^^'

Dans des balises <style> dans la page html ça me casse la PA et dans une page JS ça ne change absolument rien...

[Jawn]

Le JS c'est normal, c'est l'enfer /PAN

Wat ça casse la PA ... ??
Je peux te MP >< ?

[Yunie16]

Oui ça déforme tout TT
Sans problème oui, merci !

[Yunie16]

C'est réglé grâce à @"jawn", merciiii