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

Question

[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;
    }
}
?>

Что я сделал не так? Почему только на главной происходит сохранение?

Answer 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['имя куки'];
}
?>

Таким образом будет проверка на сессию и на куки.
И даже если юзер разлогинится и сессия затрётся, выбранная им тема вытянется из куки.

Answer 2

[Тарас Шульга]

Честно по мне вы все сложно делаете, я вот совсем недавно делал светлую/темную тему.
Просто пару css переменных + локал стораж записывал темная/светлая тема.

Comments

[midarovrk]

Для всего этого можно было использовать и JS-cookies, но тогда сначала бы подгружались стили по умолчанию, затем скрипт и только потом уже та тема, которую сохранил пользователь. Поэтому лучше сразу использовать PHP, потому что он меняет тему вместе с загрузкой страницы.

Мне кажется локал стораж тоже к этому относится.

[Тарас Шульга]

midarovrk, однако куки и сесион и локал стораж это разные бяки)

[midarovrk]

Тарас Шульга, ну а почему у меня сохранение происходит только на главной странице, не подскажите?

[midarovrk]

Тарас Шульга, хотя вы правы, SESSION кажется не лучший вариан, потестил этот метод ещё, и если юзер разлогируется с сайта, то видимо сессия сбрасывается.

[midarovrk]

Тарас Шульга, а не могли бы вы скинуть свой вариант сделанный на локал стораж?

[Тарас Шульга]

midarovrk, извините, у ПК буду завтра, если актуально будет, скину. Там логика до ужаса прямая есть css переменных и их значение ставиться от того что сохранил в локал стороже.
Насчёт чести я хз как она работает в пхп, но в жс сессия сторож очищается как только человек закроет браузер.

[v1tyok]

Здравствуйте, всё сделал как у вас, но ничего не работает, в консоли пишет: GET file:///F:/PROJECT/%7BTHEME%7D/style/%3C?php%20ech... net::ERR_FILE_NOT_FOUND.
Подскажите, в чём проблема

[Тарас Шульга]

v1tyok, не видя код - ничем не смогу вам помочь)

Answer 3

[v1tyok]

Здравствуйте, всё сделал как у вас, но ничего не работает, в консоли пишет: GET file:///F:/PROJECT/%7BTHEME%7D/style/%3C?php%20ech... net::ERR_FILE_NOT_FOUND.
Подскажите, в чём проблема