Как Могла бы делать Кнопка “Нигт Моде”?
Я Изучаю PHP и у меня есть Проблема: я хочу сделать кнопку Способа Ночью или "Нигт Моде" для того, чтобы, когда на него нажмут, стиль css страницу изменил другому и наоборот.
Стиль "day", из-за того, что это говорит, так:
<link rel='stylesheet' id='color-scheme-css' href='http://www.onpelis.ml/wp-content/themes/dooplay/assets/css/colors.fusion.css' type='text/css' media='all' />
И стиль "night" был бы этим:
<link rel='stylesheet' id='color-scheme-css' href='http://www.onpelis.ml/wp-content/themes/dooplay/assets/css/colors.dark.css' type='text/css' media='all' />
(оба stylesheet находятся в head)
Существует какой-то способ, которого, когда нажмут на кнопку или переключатель изменил себе "colors.fusion.css" в "colors.dark.css"?
Есть несколько способов это делать, requires 3 элемента: HTML с контентом ее pГЎgina, который ты не будешь менять, стили CSS для ясной темы и для темной темы и javascript, чтобы реализовывать изменение между темами.
, Если нет много CSS, связанного с изменением темы цвета, ты можешь использовать mГ©todo aГ±adir / снимать класс в элемент контейнер и способствовать тому, чтобы одна из двух схем цвета зависела от этого класса, например:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day And NightMode</title>
<style type="text/css">
* {
margin : 0;
padding : 0;
box-sizing: border-box;
-moz-box-sizing : border-box;
-webkit-box-sizing: border-box;
}
article {
border-radius: 5px;
margin-top: 1em;
padding: 2% 5%;
}
article div {
margin-top : 50px;
padding : 1em;
}
button {
padding: 5px;
}
ul {
margin-left: 2em;
margin-top : 1em;
}
.center {
text-align: center;
}
.content {
border : 1px solid grey;
border-radius: 5px;
margin : 2em 7em;
padding : 2em;
}
.contrastable {
border-radius: 5px 5px 0 0;
}
.grid {
border : none;
margin : 1em auto;
padding: 0;
width : 312px;
}
.grid div {
border-radius: 5px;
border : none;
display : inline-block;
height : 150px;
margin : 0.1em;
width : 150px;
}
</style>
</head>
<body>
<div class="content" id="content">
<div class="center">
<button onclick="swapDayAndNight()">Cambiar colores</button>
</div>
<article>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, harum nemo fugit corrupti sequi alias odit mollitia a nesciunt ipsa vero, saepe repellendus voluptas, debitis laborum dicta! Nobis quo, fuga.</p>
</div>
<div class="contrastable">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ul>
</div>
<div class="grid">
<div class="red-bg"></div>
<div class="blue-bg"></div>
<div class="blue-bg"></div>
<div class="red-bg"></div>
</div>
</article>
</div>
<link rel='stylesheet' href='public/css/light-theme.css' type='text/css'>
<link rel='stylesheet' href='public/css/dark-theme.css' type='text/css'>
<script type="text/javascript">
function swapDayAndNight()
{
var element = document.getElementById('content');
element.classList.toggle('dark-theme');
}
</script>
</body>
</html>
Сейчас файлы со стилями (ты можешь помещать все в один, если ты используешь эту tГ©cnica):
/**********************************************************************/
/*** light-theme ******************************************************/
article div {
border-bottom: 1px solid grey;
}
.blue-bg {
background: blue;
}
.contrastable {
background: #D9EC87;
}
.contrastable * {
color: #740100;
}
.red-bg {
background: red;
}
/**********************************************************************/
/*** dark-theme ******************************************************/
.dark-theme article div {
border-color: white;
}
.dark-theme article {
background: black;
color : white;
}
.dark-theme .blue-bg {
background: darkblue;
}
.dark-theme .contrastable {
background: #740100;
}
.dark-theme .contrastable * {
color: #D9EC87;
}
.dark-theme .red-bg {
background: darkred;
}
TambiГ©n и продолжая то, во что я верю, что querГ-схвати, делать, ты можешь менять таблицу стилей, которая загружает , для которого ты должен снимать класс .dark-theme dark-theme.css :
<!DOCTYPE html>
<html>
<head>
<title>Cambiar tema de color</title>
</head>
<body>
<div class="content">
<div class="center">
<button onclick="swapDayAndNight()">Cambiar colores</button>
</div>
<article class="contrastable">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, esse, suscipit! Suscipit aspernatur, cupiditate quasi commodi blanditiis reiciendis quae quod aliquam natus omnis saepe voluptas deleniti, necessitatibus ipsum praesentium expedita!</p>
</article>
</div>
<link id="color-theme" rel='stylesheet' href='public/css/light-theme.css' type='text/css'>
<script>
var element = document.getElementById('color-theme');
var light_styles = 'public/css/light-theme.css';
var dark_styles = 'public/css/dark-theme.css';
var theme = 'light';
function swapDayAndNight()
{
if (theme == 'light') {
theme = 'dark';
element.setAttribute('href', dark_styles);
} else {
theme = 'light';
element.setAttribute('href', light_styles);
}
}
</script>
</body>
</html>
Замечает: это Гєltimo функционируй верно в помещении, но если ты загружаешь стили удаленно, что serГЎ нормальное, ты только загружаешь первый лист, потому что с javascript estГЎs издавая DOM, не перезагружая ее pГЎgina, с которым у тебя есть, что подвергаться нападению хакеров mГ©todo, который я показываю тебе, например, ты загружаешь обе таблицы стилей, те же селекторы и внизу та, которая должна оказываться назначенной по умолчанию (это будет та, которая будет властвовать). AsГ - оба загружаются и только tendrГЎs, что обмениваться Вашей командой, когда он коснется менять тему.