<!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;
}
/* dark.css*/
body
{
background: #111;
color: #f4f4f4;
}
.header
{
background: #373737;
color: #f4f4f4;
}
.nav__item
{
color: #f4f4f4;
background: #373737;
}
.nav__item:hover, .nav__item_active
{
background: #444;
}
.theme-button
{
color: #f4f4f4;
background: #4f7faf;
}
.theme-button:hover
{
background: #6f9fcf;
}
/*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";
}
?>
Простой
