Javascript 使用js切换浏览器选项卡/主题颜色_Javascript_Html_Css

Javascript 使用js切换浏览器选项卡/主题颜色

javascript html css

Javascript 使用js切换浏览器选项卡/主题颜色,javascript,html,css,Javascript,Html,Css,其概念是，单击按钮时，页面内容的配色方案将与浏览器选项卡颜色一起切换到深色模式。我想到了这个： <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#ffffff"> <style> body { padding: 25px; background

其概念是，单击按钮时，页面内容的配色方案将与浏览器选项卡颜色一起切换到深色模式。我想到了这个：

<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>


身体{
填充：25px；
背景色：#ddd；
颜色：黑色；
字体大小：25px；
}
.btn{
背景：白色；
边框：1px实心#10101c；
颜色：灰色；
}
.暗模式{
背景色：#10101c；
颜色：#778899；
}
.暗模式.btn{
背景：#10101c；
颜色：红色；
边框：1px实心#002e43；
}
切换暗/亮模式
单击该按钮可在此页面的暗模式和亮模式之间切换
切换暗模式
函数切换（）{
var元素=document.body；
element.classList.toggle（“暗模式”）；
var yo=document.querySelector（“meta[name=theme color]”）；
如果yo.hasAttribute（“content”，“#ffffff”）；
{
yo.setAttribute（“内容”，“#10101c”）；
}
否则{
yo.setAttribute（“内容”，“#ffffff”）；
}
}

我哪里做错了？主要集中区域为JS区域。

p、我是JS的新手你的问题是什么

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
    }
}

希望这有帮助

我不确定你到底想完成什么，但这可以用一种简单得多的方法来完成。您只需向运行

toggle（）

函数的按钮添加一个单击事件，并从

body

元素中添加/删除类

编辑：我已经根据你的评论更新了我的答案。我认为您需要

getAttribute

，而不是在您的情况下使用

hasaAttribute

var darkButton=document.getElementById（“暗模式”）；
addEventListener（“单击”，切换）；
函数切换（）{
var bodyElement=document.querySelector（“body”）；
bodyElement.classList.toggle（“暗模式”）；
var meta=document.querySelector（“meta[name=theme color]”）；
if（meta.getAttribute（“内容”）=“#ffffff”）{
log（meta.getAttribute（“内容”）；
setAttribute（“内容”，“#10101c”）；
}否则{
log（meta.getAttribute（“内容”）；
setAttribute（“内容”，“#ffffff”）；
}
}

正文{
填充：25px；
背景色：#ddd；
颜色：黑色；
字体大小：25px；
}
.btn{
背景：白色；
边框：1px实心#10101c；
颜色：灰色；
}
.暗模式{
背景色：#10101c；
颜色：#778899；
}
.暗模式.btn{
背景：#10101c；
颜色：红色；
边框：1px实心#002e43；
}


切换暗/亮模式
单击该按钮可在此页面的暗模式和亮模式之间切换
切换暗模式

错误是什么？

meta

属性是否在任何地方读取以实际切换明暗模式？请澄清您的问题，以便我们能更好地帮助您。PS：当您的方法不失效时，您可能需要考虑在<<代码>正文上切换<代码>“黑暗< /代码> /<代码> LIG/<代码>类。检查您的第一个

if

语句，查找缺少的括号和不需要的分号。如果我删除了从“if”到“else”的脚本行以及一个额外的括号，我最终会得到部分结果，因为在第一次单击时，选项卡颜色+页面颜色从#ffffff更改为#10101c，但是，在第二次单击时，页面颜色变为#ffffff，但选项卡颜色保持为#10101c。因此，我最终编写了上述代码……但毫无用处……它甚至不会切换页面内容的颜色。元“主题颜色”会更改浏览器选项卡的颜色。我认为随着页面配色方案改变主题颜色是合理的。它是可行的，但不是完全/有意的。单击时，按预期将页面内容和选项卡颜色切换为#10101c，但第二次单击时，页面内容将按预期切换为#ffffff，但选项卡颜色仍为#10101c。目标是将其切换为#ffffff（：如果您在手机上，您可能已经注意到浏览器选项卡/导航栏在访问某些网站（如facebook）时发生了变化，其中浏览器选项卡/导航栏变为中蓝色。这是由于元标记theme color造成的。我正试图通过页面主题颜色切换来实现这一点，就像页面颜色方案随着选项卡颜色的变化一样。@jihs answer工作了一半。任何添加持久性的方法，比如在页面导航时，黑暗模式都会根据用户偏好保留，而不是在每次页面加载时将自己切换到光明模式。我想这与cookies有关。我应该问一个新问题吗？@SamiulJoy是的，请回答

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

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");
    }
}