Basculer le mode sombre à l'aide de DIIVLESS Pure CSS

Venant du point de vue de devoir écrire une documentation .html dans un environnement sharepoint de travail qui interdit javascript par défaut, j'ai été chargé de "Oh, et ajoutez un bouton pour basculer en mode sombre, merci!"

Ceci, en plus de la formulation « HTML sémantique valide et accessible » dans nos documents de politique que le patron assimile à « Même un seul DIV est de la paresse », a rendu les choses pour le moins un peu délicates.

@media (préfère le schéma de couleurs : sombre)

En contre-point, j'ai suggéré qu'au lieu d'une bascule, nous stylisons simplement la page pour qu'elle corresponde aux préférences système clair/sombre de chaque utilisateur avec une requête multimédia. La réponse a été "D'accord, commencez par ça, mais mettez quand même la bascule." Génial, je me suis créé plus de travail en essayant d'en créer moins.

J'ai déjà noté que j'aurais besoin de variables CSS et d'une méthode de saisie/étiquette de case à cocher pour contrôler le mode Clair/Sombre, mais :checked ~ * n'affecterait toujours que les éléments venant après la saisie, ce qui rendrait le style d'arrière-plan difficile à basculer.

Ma première solution a été d'utiliser un DIV générique positionné absolument en dessous de tout, qui a fonctionné jusqu'à ce que le patron le repère et me dise de s'en débarrasser. Le seul point positif est qu'ils acceptent l'utilisation du HTML/CSS moderne tant que la couverture de compatibilité est supérieure à 90 % des navigateurs.

:has() à la rescousse !

Quand j'ai vu pour la première fois cette syntaxe CSS proposée pour cibler l'élément parent avant sa mise en œuvre, je ne savais pas à quoi elle servirait. Maintenant que je l'ai retrouvé pendant que je cherchais des solutions, je me suis dit : "Pourquoi ne pas l'essayer sur BODY ?"

Cela a fonctionné immédiatement et je me suis fâché de ne pas l'avoir essayé plus tôt ! Voici le CSS pertinent avec lequel je me suis retrouvé :

      * { /* LIGHT mode */
        --tcolor: #000;
        --bgcolor: #FFF;
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(255,255,255,0.75);
        --alink:blue;
        --avisited:purple;
      }
      body:has(#d:checked), body:has(#d:checked) * { /* DARK mode */
        --tcolor: #FFF;
        --bgcolor: #000;
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(0,0,0,0.75);
        --alink:lightblue;
        --avisited:#8467D7;
      }
@media (prefers-color-scheme: dark) {
      * { /* DARK mode */
        --tcolor: #FFF;
        --bgcolor: #000;
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(0,0,0,0.75);
        --alink:lightblue;
        --avisited:#8467D7;
      }
      body:has(#d:checked), body:has(#d:checked) * { /* LIGHT mode */
        --tcolor: #000;
        --bgcolor: #FFF;
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(255,255,255,0.75);
        --alink:blue;
        --avisited:purple;
      }
}
      body { /* base element under control of mode */
        color:var(--tcolor); /* match text color to mode */
        background-image:var(--bgimage); /* match opacity overlay to mode */
        background-repeat: no-repeat no-repeat, space no-repeat;
        background-size:auto 100vh;
        margin:-1ex;
      }
      label[for="d"]::after {content: var(--lcontent);} /* DARK or LIGHT text */
      section{ /* main interaction area */
        margin:0 auto;
        background-color:var(--sbgcolor);
        padding:1ex;
        padding-top:0;
        height:fit-content;
        max-height:96.2vh;
        overflow-y:scroll;
        scrollbar-color:rgba(128,128,128,0.5) var(--sbgcolor);
      }
      li:nth-of-type(even){ /* subtle horizontal lines */
        background-color:rgba(128,128,128,0.1);
      }
      summary:hover,summary:focus-visible,a:hover,a:focus-visible { /* match mouseover or     */
        background-color:var(--bgcolor);                            /* keyboard focus to mode */
      }
      a:link {color: var(--alink)}       /* match link     */
      a:visited {color: var(--avisited)} /* colors to mode */

J'ai triché en utilisant rgba(128,128,128,0.5) pour garder la couleur de la barre de défilement SECTION neutre.

Le résultat final (non inhibé par sharepoint) ressemble à ceci.

En bonus, voici la structure des données du schéma de cette page ajoutée manuellement à l'aide d'attributs, une autre tâche qui m'a été confiée sans javascript.

Maintenant, je dois juste comprendre comment déclencher ces sons audio sans javascript !?

N'hésitez pas à commenter votre propre expérience de travail dans des environnements limités, ce qui a fonctionné et ce qui n'a pas fonctionné !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!