@midarovrk

Как сделать сохранение выбора темы тёмная/светлая на любой странице?

Нашел инструкцию как сделать тёмную тему. Сделал всё по инструкции. Всё работает, кроме одного. Почему-то сохранение происходит только на главной странице сайта. Если менять тему на другой странице, то выбор темы не сохраняется. Что я сделал не так?

В head добавил это:

<?php session_start();if(!isset($_SESSION["theme"])){$_SESSION["theme"] = "light";} ?>


И это:

<link href="{THEME}/style/<?php echo $_SESSION['theme']; ?>.css" type="text/css" rel="stylesheet" id="theme-link">


В низ перед body добавил js:

var btn = document.getElementById("theme-button");
var link = document.getElementById("theme-link");
btn.addEventListener("click", function () { ChangeTheme(); });
function ChangeTheme() {
  let lightTheme = "/templates/kinowalk-utf8/style/light.css";
  let darkTheme = "/templates/kinowalk-utf8/style/dark.css";
  var currTheme = link.getAttribute("href");
  var theme = "";

    if(currTheme == lightTheme) {
        currTheme = darkTheme;
        theme = "dark";
    }
    else {   
        currTheme = lightTheme;
        theme = "light";
    }
    link.setAttribute("href", currTheme);
    Save(theme);
    function Save(theme)
{
    var Request = new XMLHttpRequest();
    Request.open("GET", "./themes.php?theme=" + theme, true); // путь к php файлу отвечающий за сохранение
    Request.send();
}
};


И создал php файл themes.php с содержимым:

<?php
session_start();

if(isset($_GET["theme"])) {
    $theme = $_GET["theme"];
    if($theme == "light" || $theme == "dark") {
   	 $_SESSION["theme"] = $theme;
    }
}
?>


Что я сделал не так? Почему только на главной происходит сохранение?
  • Вопрос задан
  • 622 просмотра
Решения вопроса 1
@midarovrk Автор вопроса
Решил проблему.
Чтобы сохранение происходило не только на главной, в скрипте из

"./themes.php?theme="

нужно удалить "точку".

А также прикрутил куки к этому методу, выложу, может кому пригодится.

В php файл надо добавить

SetCookie("имя куки","$theme",time()+86400 * 30 * 12);

Должно получиться так:

<?php
session_start();

if(isset($_GET["theme"]))
{
    $theme = $_GET["theme"];
    
    SetCookie("имя куки","$theme",time()+86400 * 30 * 12);

    if($theme == "light" || $theme == "dark")
    {
        $_SESSION["theme"] = $theme;
    }
}
?>

А в тот кусок php кода который располагается в head надо добавить:

if(isset($_COOKIE['имя куки'])){
  $_SESSION["theme"] = $_COOKIE['имя куки'];
}

Должно получиться так:

<?php
session_start();

if(!isset($_SESSION["theme"]))
{
    $_SESSION["theme"] = "light";
}

if(isset($_COOKIE['имя куки'])){
  $_SESSION["theme"] = $_COOKIE['имя куки'];
}
?>

Таким образом будет проверка на сессию и на куки.
И даже если юзер разлогинится и сессия затрётся, выбранная им тема вытянется из куки.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
AngryYumy
@AngryYumy
Заплати фрилансеру чеканой монетой
Честно по мне вы все сложно делаете, я вот совсем недавно делал светлую/темную тему.
Просто пару css переменных + локал стораж записывал темная/светлая тема.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Farpost Владивосток
от 60 000 ₽
Moncera Киров
от 100 000 до 120 000 ₽
Moncera Киров
от 150 000 до 180 000 ₽
28 окт. 2021, в 20:59
3000 руб./за проект
28 окт. 2021, в 20:23
3000 руб./за проект
28 окт. 2021, в 19:57
120000 руб./за проект