Изменить цвет фона в CSS (Светлая и Темная тема на сайте) - PullRequest
Новая
       71

Изменить цвет фона в CSS (Светлая и Темная тема на сайте)

0 голосов
/ 26 ноября 2018

У меня есть вопрос, я использую бесплатный шаблон HTML5 UP Editor и хочу создать кнопку, которая переключит тему со светлой на темную.Я сделал это на одной странице, на главной странице, она переключается на темную, но если я перехожу на другую страницу (в моем примере от ДОМАШНЯЯ СТРАНИЦА до ЭЛЕМЕНТОВ), она сбрасывается на светлую тему по умолчанию.Можно ли сделать его темным на всех страницах, если кто-то щелкнет темную тему на главной странице?и еще раз, если кто-то нажмет на свет, он включит тему на всех страницах.Это 100% HTML, поэтому я не знаю, стоит ли использовать java или другой вариант.

Вот мое рабочее пространство: http://foodtek.eu/pub/index.html (в правом верхнем углу - значки для переключения темы)

Я хочу, чтобы это работало, как здесь: https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/-lmi

function swapStyleSheet(sheet){
	document.getElementById('pagestyle').setAttribute('href', sheet);
}
<li><a href="#" class="icon fa-sun-o" onclick="swapStyleSheet('assets/css/main_light.css')"><span class="label">Light Style Sheet</span></a></li>
<li><a href="#" class="icon fa-moon-o" onclick="swapStyleSheet('assets/css/main_dark.css')"><span class="label">Dark Style Sheet</span></a></li>

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Как сделать так, чтобы тема применялась ко всем страницам?

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

Вы можете узнать больше об изменении таблиц стилей с помощью JavaScript здесь .

Вы можете узнать больше о чтении файлов cookie здесь . 

(function() {
  if (document.cookie.indexOf('theme=') != -1) {
    switchTheme(getCookie("theme"));
  } else {
    switchTheme('light');
  }
})();

function swapStyleSheet(theme) {
  document.getElementById("css").setAttribute("href", theme);
}

function switchTheme(theme) {
  document.cookie = "theme=" + theme;
  swapStyleSheet("assets/css/main_" + theme + ".css");
}
<!doctype html>
<html>

<head>
  <title>Theme Toggle Example</title>
  <link id="css" rel="stylesheet" href="assets/css/main_light.css" />
</head>

<body>
  <h2>Theme Toggle Example</h2>
  <a href="javascript:void(0);" onclick="switchTheme('light');">Light Theme</a> |
  <a href="javascript:void(0);" onclick="switchTheme('dark');"> Dark Theme</a>
</body>

</html>

Как это выглядит?

Demo

0 голосов
/ 26 ноября 2018 
function setTheme(isDark) {
    if (isDark) {
        localStorage$1.setItem("theme", nightClassName);
        html.add(nightClassName);
    } else {
        html.remove(nightClassName);
        localStorage$1.removeItem("theme");
    }
}
...