:: Blank Theme sources :: Plugins
Edison
Pronoun(s) : Il/He/They
Messages : 11
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.
Monomer
Facile
HTML et CSS (JS facultatif)
Oui
Pronoun(s) : Il/He/They
Messages : 11
Installation
Edison nécessite l'installation de HTML et Script dans
Le script d'Edison est en deux parties. Premièrement, dans
- 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, dansgé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>
Pour le bouton, quelques lignes suffisent pour son affichage. Pour que le bouton apparaisse sur toutes les pages, mettez-le dans le template
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>
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);
}
|
|