Felületváltót néhány trükkel meg lehet oldani. Némi süti kezelés + css + javascript
Példa a világos - sötét váltásra.
Valahol kell definiálnod, hogy tudd a dark mode-ot kiolvasni.
define('DARK_MODE', isset($_COOKIE['dark-mode']) && $_COOKIE['dark-mode'] == 1);
if (DARK_MODE) {
define('THEME_BODY', '<body class="dark">');
}
aztán kell egy kapcsoló amivel váltod:
<a href="#" data-action="dark-mode" class="darkmode-switch'.(DARK_MODE ? ' active' : '').'" title="DARK MODE SWITCH"></a>
meg kell egy figyelés a css-ekre, hogy melyik az aktív.
DARK_MODE ? 'dark': 'light';
meg kell némi javascript amivel beállítod a sötét módot és vissza
body.on("click", "[data-action]", function (e) {
switch ($(this).data("action")) {
case "dark-mode":
e.preventDefault();
let style_attr = $(".header").attr("style");
if (body.hasClass("dark")) {
body.removeClass("dark");
$(this).removeClass("active");
Cookies.set("dark-mode", 0);
if (typeof style_attr !== typeof undefined && style_attr !== false) {
$(".header").attr("style", style_attr.replace("dark", "light"));
}
} else {
body.addClass("dark");
$(this).addClass("active");
Cookies.set("dark-mode", 1);
if (typeof style_attr !== typeof undefined && style_attr !== false) {
$(".header").attr("style", style_attr.replace("light", "dark"));
}
}
break;
}
});
Jah és némi css a váltó gomb megformázásához:
és persze a dark módnak a css-ei:
Mindent nem fejtettem ki :)
Ephyx