Почему у меня не работает Сохранение темы?

Question

<!DOCTYPE html>
<html>

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

    <head>
     <title>Site with dark theme</title>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="styles/main.css">
     <link rel="stylesheet" type="text/css" href="styles/light.css" id="theme-link">
    <link rel="stylesheet" type="text/css" href="styles/<?php echo $_SESSION['theme']; ?>.css" id="theme-link">
    </head>
    <body>
     <div class="wrapper">
         <div class="theme-button" id="theme-button">Change theme</div>
         <header class="header">
             <div class="header__content">
                 <h1>Site with dark theme</h1>
                 <nav class="nav">
                     <div class="nav__content">
                         <a href="#" class="nav__item nav__item_active">Home</a>
                         <a href="#" class="nav__item">Blog</a>
                         <a href="#" class="nav__item">About</a>
                         <a href="#" class="nav__item">Contacts</a>
                     </div>
                 </nav>
             </div>
         </header>
         <main class="main">
             <article class="main__content">
                 //Тут будет Lorem Ipsum
             </article>
         </main>
     </div>
     <script type="text/javascript" src="scripts/themes.js"></script>
    </body>
</html>

var btn = document.getElementById("theme-button");
var link = document.getElementById("theme-link");

btn.addEventListener("click", function () { ChangeTheme(); });

function ChangeTheme()
{
    let lightTheme = "styles/light.css";
    let darkTheme = "styles/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); //У вас путь может отличаться
    Request.send();
}

/*main.css*/
body, html
{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: arial;
    font-size: 16px;
}

.wrapper
{
    width: 100%;
}

.header
{
    background: #ccc;
}

.header__content
{
    padding: 5px;
}

.nav__item
{
    display: inline-block;
    vertical-align: middle;
    padding: 15px 25px;
    margin: 2px;
    cursor: pointer;
    text-decoration: none;
}

.main__content
{
    width: 80%;
    margin: 0 auto;
}


.theme-button
{
    position: absolute;
    right: 5px;
    top: 5px;
    display: inline-block;
    padding: 10px 25px;
    cursor: pointer;
}

/*light.css*/
body
{
    background: #f4f4f4;
    color: #111;
}

.header
{
    background: #4a76a8;
    color: #f4f4f4;
}

.nav__item
{
    color: #f4f4f4;
    background: #4a76a8;
}

.nav__item:hover, .nav__item_active
{
    background: #4f7faf;
}

.theme-button
{
    color: #f4f4f4;
    background: #444;
}

.theme-button:hover
{
    background: #555;
}

<?php
session_start();

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

БЛОГ НА HUSL

Почему у меня не работает Сохранение темы?

Ответы (0 шт):