@1KirillIvanov

Как сделать DarkMode на сайте без подмены css, а только с подменой html?

В общем то есть index.html и dark.html

нужно как-то сделать, чтобы при нажатии кнопки html подменялся и запоминался в куки, но без перезагрузки страницы. У меня есть идея реализовать это с помощью вкладок страницы, помогите пожалуйста, дайте код, что, где и как делать? В гугле вообще ничего не нашёл по этому поводу! Хотел поступить методом смены мультиязычности но и там ничего не нашёл нужного.

Подменять css не вариант, ибо возникают проблемы с иконками, инверсией цветов и (html файлы на основе бутстрап ксс и подгружают их с сервера, поэтому не вариант вообще, пробовал уже, можете не спрашивать)

Буду благодарен за помощь! Спасибо заранее.
  • Вопрос задан
  • 103 просмотра
Решения вопроса 1
@alekcena
В попытках обрести навыки и умения
1KirillIvanov, А ну если у вас такой css, То решается в пару строк js
Именно когда на элементе есть
let allElem = document.querySelectorAll('[class$="light"]')//Ищем все элементы у которых в конце есть приставка light
allElem.forEach(item=>{
item.className = item.className.replace(/light/g, "dark");
});

Надеюсь понятно что на этом классе не должно быть ещё классов которые не относяться к изменению темы
просто light and dark
Их тоже перетрёт
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Anonymous24
@Anonymous24
Понедельник, это как вторник, но только вчера.
Так правильно

<!DOCTYPE html>
<html data-mode="dark">
<head>
	<title>Site</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
	<h1>Тест</h1>
	<button class="theme-button" id="js-theme-button">Переключить стиль</button>
	<script type="text/javascript" src="themes.js"></script>
</body>
</html>

:root {
	--bg-base: #444;
	--color-text: #000
}

[dark-mode=dark]
:root {
	--bg-base: #000;
	--color-text: #fff
}

body {
	background: var(--bg-base);
	color: var(--color-text);
}



А так нет

<!DOCTYPE html>
<html>
<head>
	<title>Site</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="theme-dark.css">
	<link rel="stylesheet" type="text/css" href="theme-light.css" id="theme-link">
</head>
<body>
	<h1>Тест</h1>
	<button class="theme-button" id="js-theme-button">Переключить стиль</button>
	<script type="text/javascript" src="themes.js"></script>
</body>
</html>

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

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

function ChangeTheme() {
	let lightTheme = "theme-light.css";
	let darkTheme = "theme-dark.css";

	var currentTheme = link.getAttribute("href");
	var theme = "";

	if (currentTheme == lightTheme) {
		currentTheme = darkTheme;
		theme = "dark";
	}
	else {
		currentTheme = lightTheme;
		theme = "light";
	}

	link.setAttribute("href", currentTheme);

	Save(theme);
}

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
25 июл. 2021, в 21:03
1500 руб./за проект
25 июл. 2021, в 20:53
500 руб./в час
25 июл. 2021, в 20:33
100000 руб./за проект