Install Edison

Introduction à Edison

Edison est un switch de thème qui permet d'avoir un thème clair ou sombre pour s'accorder aux préférences de chacun. Il fonctionne grâce aux variables CSS et choisi le thème de base en fonction des choix de navigateur de l'utilisateur.
Ce plugin est déjà installé dans le Blank Theme.

Réalisé par Monomer

Support
Pour toutes question, rendez-vous dans la section dédiée au support !

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 () {
    var html = document.documentElement;
    var themeControls = document.querySelector("[data-theme-controls]");
    var toggle = themeControls.querySelector(".color-scheme-toggle");
    var prefersDark = window.matchMedia("(prefers-color-scheme: dark)");


    var setToggleLabel = function () {
        let mode;

        mode = !html.dataset.colorScheme
            ? prefersDark.matches
                ? "dark"
                : "light"
            : html.dataset.colorScheme;

        toggle.setAttribute(
            "title",
            "Enable" + (mode === "dark" ? "light" : "dark") + "mode"
        );
    };

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

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

    toggle.addEventListener("click", function () {
        if (!html.dataset.colorScheme && prefersDark.matches) {
            setColorScheme("light");
            updateColorSchemeStatus("light");
            return;
        }

        var 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 theme = localStorage.getItem('theme');
        const colorScheme = localStorage.getItem('color-scheme');
  
        html.removeAttribute("data-no-js");
        colorScheme && html.setAttribute('data-color-scheme', colorScheme);
        theme && html.setAttribute('data-theme', theme);
      })();
    </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 {
     --neutral: #FFF
     --accentClr: blue;
}


/* VARIABLE DU MODE INVERSE (ici mode sombre) */
 [data-color-scheme="dark"] {
     --neutral: #000;
     --accentClr: red;
 }
  
 @media (prefers-color-scheme: dark) {
   [data-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 ---*/
@media (prefers-color-scheme: dark) {.color-scheme-toggle .dark{display: none}}
@media (prefers-color-scheme: light) {.color-scheme-toggle .light{display: none}}
.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);
}