无法在HTML网站中实施暗模式

时间：2020-05-05 15:26:46

标签： javascript html css

我正在构建HTML网页，因此我想为网页实施暗模式。我在网上查看了很多示例，并尝试从网上实现1。但是，我尝试将HTML网页和JavaScript链接在一起，但是看来我的网页仍然无法更改为暗模式。我的代码有问题吗？ 

    let toggle = document.querySelector('.theme-switch input[type="checkbox"]');

document.body.setAttribute("dark-theme", false);

toggle.addEventListener("change", (e) => {
    if (e.target.checked) {
        document.body.setAttribute("dark-theme", true);
    } else {
        document.body.setAttribute("dark-theme", false);
    }
});
  
 body[dark-theme="true"] p {
  color: #000;
}

body[dark-theme="false"] p {
  color: #fff;
}

/* CSS Feature For Slider Button */
.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 26px;
}

input:checked + .slider {
  background-color: #66bb6a;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />

    <!-- External CSS stylesheet -->
    <link rel="stylesheet" href="index.css" />

    <!-- Mandatory bootstrap tags -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <!-- Title and Favicon -->
    <title>Jibaboom! ∙ DataViewer</title>
    <link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
    <link rel="manifest" href="./favicons/site.webmanifest">

    <!-- Slider Script Src -->
    <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css"
        rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
</head>

<body>
    <div class="container">

        <!-- NavBar Experiment Feature-->
        <nav class="navbar navbar-expand-xl navbar-transparent bg-transparent">
            <a class="navbar-brand" href="#">
                <img src="favicons/favicon.ico" width="30" height="30" class="d-inline-block align-top" alt="">
                Jibaboom
            </a>

            <label class="theme-switch" for="checkbox">
                <input type="checkbox" id="checkbox"/>
                <div class="slider round"></div>
            </label>
        </nav>

        <!-- Data Viewer Table -->
        <table class="table table-striped table-hover table-bordered my-5">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>July</td>
                    <td>Dooley</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Source For JS Responsive Script -->
    <script src="index.js"></script>
</body>

<footer class="site-footer">
    <div class="container">
        <div class="row">
        </div>
        <hr>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-sm-6 col-xs-12">
                <p class="copyright-text">Copyright &copy; 2020 All Rights Reserved by Jibaboom
                    <a href="#">skrtttt</a>.
                </p>
            </div>


        </div>
    </div>
</footer>

</html>

2 个答案:

答案 0 :(得分：1)

这是一个建议：

let toggle = document.querySelector('.theme-switch input[type="checkbox"]');

document.body.setAttribute('dark-theme', false);
document.querySelector('footer').setAttribute('dark-theme', false);

toggle.addEventListener('change', e => {

    if(e.target.checked) {

        document.body.setAttribute('dark-theme', true);
        document.querySelector('footer').setAttribute('dark-theme', true);

    } else {

        document.body.setAttribute('dark-theme', false);
        document.querySelector('footer').setAttribute('dark-theme', false);

    }

});

选中该复选框后，页面上的body元素将获得一个属性（“ dark-theme”），为true或false值。您可以在纯CSS中使用此样式，然后在整个页面上应用深色或浅色样式。一个样板示例可能是：

body[dark-theme=true] p { color: #fff; }

body[dark-theme=false] p { color: #000; }

footer[dark-theme=true] p { color: #fff; }

footer[dark-theme=false] p { color: #000; }

尽管这是您尝试回答时的另一种方法，但我个人认为这要简单得多。如果您发现此解决方案有任何问题，请告诉我，以便我们进一步为您提供帮助。

答案 1 :(得分：0)

const toggleSwitch = document.querySelector(
  '.theme-switch input[type="checkbox"]'
);
// Had to remove local storage for security. Make sure to uncomment in your code.
// const currentTheme = localStorage.getItem("theme");

// if (currentTheme) {
//   document.documentElement.setAttribute("data-theme", currentTheme);

//  if (currentTheme === "dark") {
//    toggleSwitch.checked = true;
//  }
// }

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
    // localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    // localStorage.setItem("theme", "light");
  }
}

toggleSwitch.addEventListener('change', switchTheme)
[data-theme="dark"] {
  background-color: black;
  color: white;
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked+.slider {
  background-color: #66bb6a;
}

input:checked+.slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">

<body>
  <div class="container">
    <nav class="navbar navbar-expand-xl navbar-transparent bg-transparent">
      <label class="theme-switch" for="checkbox">
                <input type="checkbox" id="checkbox"/>
                <div class="slider round"></div>
        </label>
    </nav>
</body>

</html>

您需要将事件监听器添加到您的复选框，以便您的javascript看起来应该像这样：

const toggleSwitch = document.querySelector(
  '.theme-switch input[type="checkbox"]'
);
const currentTheme = localStorage.getItem("theme");

if (currentTheme) {
  document.documentElement.setAttribute("data-theme", currentTheme);

  if (currentTheme === "dark") {
    toggleSwitch.checked = true;
  }
}

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  }
}

toggleSwitch.addEventListener('change', switchTheme)

您还需要将.dark-mode CSS选择器更改为[data-theme="dark"]

相关问题
最新问题