Ночная тема для сайта

Пример:

HTML:

<label class="dark-version">
	<input type="checkbox" onchange="toggledark()" id="toggledark">
	<span class="toggledark round"></span>
</label>

</label>

CSS:

.dark-version {
	width: 70px;
	height: 44px;
	position: relative;
	display: inline-block;
	border: 5px solid #337AB7;
	border-radius: 50px;	
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);	
}
.dark-version input {
	display: none;
}
.dark-version .toggledark {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
	position: absolute;
	transition: 0.5s;
	background: #ffffff;
	border-radius: 50px;
}
.dark-version .toggledark:before {
	top: 0;
	bottom: 0;
	width: 28px;
	left: 2px;
	content: "";
	height: 30px;
	margin: auto 0;
	position: absolute;
	transition: 0.5s;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23ffba0d' d='M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z'/%3e%3c/svg%3e");
	background-position: center;
	background-repeat: no-repeat;
}
.dark-version input:checked + .toggledark {
	background: #000;
}
.dark-version input:checked + .toggledark:before {
	-webkit-transform: translateX(24px);
	transform: translateX(24px);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23FFFFFF' d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
}

.dark-version {

width: 70px;

height: 44px;

position: relative;

display: inline-block;

border: 5px solid #337AB7;

border-radius: 50px;

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

}

.dark-version input {

display: none;

}

.dark-version .toggledark {

top: 0;

left: 0;

right: 0;

bottom: 0;

cursor: pointer;

position: absolute;

transition: 0.5s;

background: #ffffff;

border-radius: 50px;

}

.dark-version .toggledark:before {

top: 0;

bottom: 0;

width: 28px;

left: 2px;

content: "";

height: 30px;

margin: auto 0;

position: absolute;

transition: 0.5s;

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23ffba0d' d='M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z'/%3e%3c/svg%3e");

background-position: center;

background-repeat: no-repeat;

}

.dark-version input:checked + .toggledark {

background: #000;

}

.dark-version input:checked + .toggledark:before {

-webkit-transform: translateX(24px);

transform: translateX(24px);

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23FFFFFF' d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'/%3e%3c/svg%3e");

background-repeat: no-repeat;

background-position: center;

}

А далее добавляем к нужным элементам сайта дополнительные цвета, например имеем:

body {
	background: #fff;
}
.mission h3 {
	color: #000;
	background: #BFE2FF; 
	border: 1px solid #337AB7;
	margin-bottom: 17px;
	position: relative;
	padding-bottom: 10px;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 600;
}

body {

background: #fff;

}

.mission h3 {

color: #000;

background: #BFE2FF;

border: 1px solid #337AB7;

margin-bottom: 17px;

position: relative;

padding-bottom: 10px;

text-transform: uppercase;

font-size: 20px;

font-weight: 600;

}

Добавляем:

body.dark {
	background: #000;
}
.dark .mission h3 {
	color: #fff;
	background: #337AB7; 
	border: 1px solid #000;
}

body.dark {

background: #000;

}

.dark .mission h3 {

color: #fff;

background: #337AB7;

border: 1px solid #000;

}

В этом примере я использовал массовую замену фона и шрифтов, добавив:

body.dark {
	background: #000;
}

.dark *,
.dark *:after,
.dark *:before {
	color: #FFF!important;
	background-color: #000!important;
}

body.dark {

background: #000;

}

.dark *,

.dark *:after,

.dark *:before {

color: #FFF!important;

background-color: #000!important;

}

Но так лучше не делать, т.к. может измениться лишнее, а что-то нужное нет.

JS:

JS используется для того, чтобы запомнить сделанный выбор и вывести его при загрузке страницы.

function toggledark() {
	if (localStorage.getItem('theme') === 'dark') {
		localStorage.removeItem('theme');
		document.body.classList.remove("dark");
		} else {
		localStorage.setItem('theme', 'dark');
		document.body.classList.add("dark");
	}
}
if (localStorage.getItem('theme') === 'dark') {
	document.body.classList.add('dark');
	document.getElementById('toggledark').checked = true;
} else {
	document.body.classList.remove('dark');
	document.getElementById('toggledark').checked = false;
}

function toggledark() {

if (localStorage.getItem('theme') === 'dark') {

localStorage.removeItem('theme');

document.body.classList.remove("dark");

} else {

localStorage.setItem('theme', 'dark');

document.body.classList.add("dark");

}

if (localStorage.getItem('theme') === 'dark') {

document.body.classList.add('dark');

document.getElementById('toggledark').checked = true;

} else {

document.body.classList.remove('dark');

document.getElementById('toggledark').checked = false;

}

Вова: 12.11.2024 в 23:54

Кто поможет, как сделать что бы после перехода между страницами или после обновления страницы повторно не включался светлый режим, а только после переключения ползунка.

Ответить
- Alexander: 14.11.2024 в 10:15
  
  Скрипт запомниает же нажатие.
  
  Ответить
Roudeep: 06.11.2024 в 16:20

Спасибо большое вам за ваши скрипты это очень удобно я добавил снег в ссылка ! Bы супер ребята

Ответить
Иван: 05.12.2022 в 10:36

Откуда взялся theme в getItem('theme')?

Ответить
- Alexander: 05.12.2022 в 13:07
  
  Это название ключа, можно tema написать везде, если так больше нравится.
  
  Ответить

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

Комментарии: