Цвет вкладки браузера / темы переключается с js - PullRequest
Новая
       4

Цвет вкладки браузера / темы переключается с js

2 голосов
/ 24 апреля 2020

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

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<style>

body {
  padding: 25px;
  background-color: #ddd;
  color: black;
  font-size: 25px;
}

.btn {
    background: white;
    border: 1px solid #10101c;
    color: grey;
}

.dark-mode {
  background-color: #10101c;
  color: #778899;
}

.dark-mode .btn {
    background: #10101c;
    color: red;
    border: 1px solid #002e43;
}

</style>
</head>
<body>

<h2>Toggle Dark/Light Mode</h2>
<p>Click the button to toggle between dark and light mode for this page.</p>
<button class="btn" onclick="toggle()">Toggle dark mode</button>

<script>
function toggle() {
    var element = document.body;
    element.classList.toggle("dark-mode");
    var yo = document.querySelector("meta[name=theme-color]");

    if yo.hasAttribute("content", "#ffffff");
    {
    yo.setAttribute("content", "#10101c"); 
    }
    else {
    yo.setAttribute("content", "#ffffff");
    }
}
</script>

</body>
</html>

Куда я иду не так? Основной областью концентрации является область JS. я новичок в JS

Ответы [ 2 ]

3 голосов
/ 24 апреля 2020

ваша проблема?

Оператор if имеет точку с запятой после скобки в операторе if. 

function toggle() {
    var element = document.body;
    element.classList.toggle("dark-mode");
    var yo = document.querySelector("meta[name=theme-color]"); //<-- this semicolon

    if yo.hasAttribute("content", "#ffffff"); //<-- this semicolon 
    {
        yo.setAttribute("content", "#10101c"); //<-- this semicolon
    }
else {
        yo.setAttribute("content", "#ffffff"); //<-- and this semicolon are all your problem
    }
}

Примечание: в скобках необходимо ставить начало и конец оператора if.

пример: 

if (9 < 10) {
    console.log("9 is less than 10")
}

.hasAttribute принимает только один параметр. Вы дали ему два: if yo.hasAttribute("content", "#ffffff")

попробуйте вместо этого - 

function toggle() {
    let element = document.body;
    element.classList.toggle("dark-mode");
    let yo = document.querySelector("meta[name=theme-color]");

    if (yo.hasAttribute("content")) {
        yo.setAttribute("content", "#10101c");
    }
else {
        yo.setAttribute("content", "#ffffff");
    }
}

Надеюсь, это помогло!

1 голос
/ 24 апреля 2020

Я не совсем уверен, чего вы пытаетесь достичь sh, но это можно сделать гораздо проще. Вы можете просто добавить событие click к кнопке, которая запускает вашу функцию toggle() и добавляет / удаляет класс из элемента body.

РЕДАКТИРОВАТЬ: я обновил свой ответ на основе вашего комментария. Вместо использования hasAttribute в вашем состоянии, я думаю, вам нужно getAttribute. 

var darkButton = document.getElementById("dark-mode");

darkButton.addEventListener("click", toggle);

function toggle() {
  var bodyElement = document.querySelector("body");

  bodyElement.classList.toggle("dark-mode");

  var meta = document.querySelector("meta[name=theme-color]");

  if (meta.getAttribute("content") === "#ffffff") {
    console.log(meta.getAttribute("content"));
    meta.setAttribute("content", "#10101c");
  } else {
    console.log(meta.getAttribute("content"));
    meta.setAttribute("content", "#ffffff");
  }
}
body {
  padding: 25px;
  background-color: #ddd;
  color: black;
  font-size: 25px;
}

.btn {
  background: white;
  border: 1px solid #10101c;
  color: grey;
}

.dark-mode {
  background-color: #10101c;
  color: #778899;
}

.dark-mode .btn {
  background: #10101c;
  color: red;
  border: 1px solid #002e43;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#ffffff">
</head>

<body>
  <h2>Toggle Dark/Light Mode</h2>
  <p>Click the button to toggle between dark and light mode for this page.</p>
  <button id="dark-mode" class="btn">Toggle dark mode</button>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...