Невозможно реализовать темный режим на веб-сайте html - PullRequest
Новая
       0

Невозможно реализовать темный режим на веб-сайте html

0 голосов
/ 05 мая 2020

Я занимаюсь созданием своей HTML веб-страницы, и я хотел реализовать темный режим для своей веб-страницы. Я просмотрел довольно много примеров в Интернете и попытался реализовать один из них. Тем не менее, я попытался связать веб-страницу 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 ]

1 голос
/ 05 мая 2020

Вот предложение: 

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') как истинное или ложное значение. вы можете использовать это в обычном 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; }

Хотя это другой подход к тому, что вы пытались сделать в своем ответе, я лично считаю, что это намного проще. Дайте мне знать, если вы обнаружите какие-либо проблемы с этим решением, чтобы я мог вам помочь.

0 голосов
/ 05 мая 2020 

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)

You также необходимо изменить селектор .dark-mode CSS на [data-theme="dark"]

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...