Edison

Installation

Script
Le script d'Edison est en deux parties. Premièrement, dans général/overall_footer_end, copiez le code suivant avant la balise </body>

Code:

<!-- EDISON plugin -->
<script>
(function () {
    const html = document.documentElement;
    const themeControls = document.querySelector("[data-theme-controls]");
    const toggle = themeControls.querySelector(".color-scheme-toggle");
    
    const setToggleLabel = function () {
     let mode = html.dataset.colorScheme;
        toggle.setAttribute(
            "title",
            "Activer le mode " + (mode === "dark" ? "clair" : "sombre")
        );
    };

    const setColorScheme = function (value) {
        html.dataset.colorScheme = value;
        localStorage.setItem("color-scheme", value);
        setToggleLabel();
    };

    const init = function () {
        setToggleLabel();
    };

    toggle.addEventListener("click", function () {
        const scheme = html.dataset.colorScheme === "dark" ? "light" : "dark";
        setColorScheme(scheme);
    });

    init();

})();
</script>

Puis, dans général/overall_header le deuxième code suivant juste avant la balise </head>. Cela permet au plugin de charger avant l'affichage de la page.

Code:

<!-- INITIALISATION DU PLUGIN EDISON -->    
<script>
        (function () {
          const html = document.documentElement;
          const userThemePreference = window.matchMedia("(prefers-color-scheme: dark)").matches;
          const colorScheme = localStorage.getItem('color-scheme');
        
          if (!colorScheme && userThemePreference) {
    html.setAttribute('data-color-scheme', 'dark');
          }
    
          colorScheme && html.setAttribute('data-color-scheme', colorScheme);
        })();
</script>

HTML
Pour le bouton, quelques lignes suffisent pour son affichage. Pour que le bouton apparaisse sur toutes les pages, mettez-le dans le template overall_header ou overall_footer_end
Dans le Blank Theme, le bouton est installé dans overall_footer_end.

Code:

<!-- Switch thème button -->
            <div data-theme-controls>
                <button class="color-scheme-toggle" title="Activer le mode sombre" aria-describedby="theme-controls-focus-text">
                    <!-- Light theme -->
                    <div class="icon light"><i class="ion-ios-sunny"></i></div>
                    <!-- Dark theme -->
                    <div class="icon dark"><i class="ion-ios-moon"></i></div>
                </button>
            </div>

CSS
Enfin, utilisez les variables CSS pour gérer les couleurs et autre propriétés d'un thème à l'autre.
Qu'est-ce qu'une variable CSS?

Code:

/* VARIABLE DU MODE PAR DEFAUT */
:root {
    color-scheme: light;
     --neutral: #FFF
     --accentClr: blue;
}


/* VARIABLE DU MODE INVERSE (ici mode sombre) */
 [data-color-scheme="dark"] {
    color-scheme: dark;
     --neutral: #000;
     --accentClr: red;
 }

Attention! Vous aurez remarqué que les variables du mode inverse sont déclarées deux fois. Il s'agit de la fonction pour s'adapter au choix du navigateur de l'utilisateur.

Enfin, la gestion du bouton et sa stylisation :
(j'utilise ici des variables du Blank Theme)

Code:

/* BOUTON CHANGEMENT DE THEME ---*/
.color-scheme-toggle,
[data-color-scheme="light"] .color-scheme-toggle .dark,
[data-color-scheme="dark"] .color-scheme-toggle .light {display: block;width: 100%;}

[data-color-scheme="dark"] .color-scheme-toggle .dark,
[data-color-scheme="light"] .color-scheme-toggle .light {display: none}



.color-scheme-toggle {
    background-color: var(--neutralDark);
    padding: 5px 8px;
    font-size: 36px;
    text-align: center;
    border-radius: 5px;
    color: var(--textColor);
}

.color-scheme-toggle:hover {
    color: var(--accentClr);
}