1

我基本上是在我的网站上设置一个暗模式切换，我希望浏览器记住用户从暗到亮的主题点击。代码有些混乱且不干净，但无论如何它可以在更改深色和浅色模式样式表中起作用。

<link rel='stylesheet' id='3432-css' href='//site-url.org.in/wp-content/uploads/custom-css-js/3432.css?v=3920' type="text/css" media='all' />

<link rel='stylesheet' id='3428-css' href='//site-url.org.in/wp-content/uploads/custom-css-js/3428.css?v=2941' type="text/css" media='all' />

    <div id="switch" class="toggle">      
        <div class="in-toggle tg-left">
           <input type="checkbox"> 
         </div>
    </div>

JavaScript：

jQuery(document).ready(function($){
  
 var toggle_btn = $(".toggle .in-toggle input");
    var i_tg = $(".in-toggle");
    var toggle = $(".toggle");
    
    toggle_btn.on("click", clicked);
    
    function clicked() {
      if (toggle_btn.is(":checked")) {
        i_tg.addClass("tg-right");
    
        toggle.addClass("clicked");

      } else {
        i_tg.removeClass("tg-right");
        toggle.removeClass('clicked');

      }
    }
  
  
  var  switch_mode = 'dark';

document.getElementById('switch').onclick = function(){
  if(switch_mode == 'dark'){
      document.getElementById('3428-css').setAttribute('href','');
     document.getElementById('3432-css').setAttribute('href','//site-url.org.in/wp-content/uploads/custom-css-js/3432.css');
     switch_mode = 'light';
     
       
  } else {
    
 document.getElementById('3428-css').setAttribute('href','//site-name.org.in/wp-content/uploads/custom-css-js/3428.css');
 document.getElementById('3432-css').setAttribute('href','');
     switch_mode = 'dark';

  }
}
});

在切换回切换之前，如何保存用户交互的切换？这一切都适用于未登录的用户，因此本地存储或 cookie 会话可能会有所帮助。

小提琴链接

4

1 回答 1

0

我终于让它与本地存储一起工作。js变了。工作小提琴

我从这篇文章中得到了这个工作。一定要在调用 jquery 后添加 JS 作为样式，否则某些细节将无法按预期工作

html

<link rel='stylesheet' id='3432-css' href='//your-site.org.in/wp-content/uploads/custom-css-js/3432.css?v=3920' data-theme="dark" type="text/css" media='all' />

<link rel='stylesheet' id='3428-css' href='//your-site.org.in/wp-content/uploads/custom-css-js/3428.css?v=2941' data-theme="light" type="text/css" media='all' />

<div id="switch1" class="container1 toggle">
        <div class="toggle-container">
         <input type="checkbox" id="switch" /><label for="switch">Toggle</label>
        </div>
  </div>

JavaScript

let theme = localStorage.getItem('data-theme');
const checkbox = document.getElementById("switch");
const changeThemeToDark = () =>{
document.getElementById('3428-css').setAttribute('href','');
     document.getElementById('3432-css').setAttribute('href','//your-site.org.in/wp-content/uploads/custom-css-js/3432.css');
    document.documentElement.setAttribute("data-theme", "dark")
     document.getElementsByTagName("label")[0].setAttribute("class", "darkbg");
    localStorage.setItem("data-theme", "dark")
}

const changeThemeToLight = () =>{
   document.getElementById('3428-css').setAttribute('href','//your-site.org.in/wp-content/uploads/custom-css-js/3428.css');
 document.getElementById('3432-css').setAttribute('href','');
  document.getElementsByTagName("label")[0].setAttribute("class", "lightbg");
    localStorage.setItem("data-theme", 'light')
}

if(theme === 'dark'){
    changeThemeToDark()
}

checkbox.addEventListener('change', ()=> {
    let theme = localStorage.getItem('data-theme');
    if (theme ==='dark'){
    document.getElementsByTagName("label")[0].setAttribute("class", "darkbg");
        changeThemeToLight()
    }else{
    document.getElementsByTagName("label")[0].setAttribute("class", "lightbg");
        changeThemeToDark()
    }
   
});

风格

    .container1 {
    width: 60px;
    height: 30px;
    position: fixed;
    top: 85%;
    left: 85%;
    transition: 1s ease;
    z-index: 999;
}

div#switch1:before {
    content: 'Switch Theme';
    position: absolute;
    top: -30px;
    width: 110px;
    text-align: center;
    left: -30px;
    font-weight: bold;
    /* box-shadow: 5px 10px 8px #ffd6d6; */
    background: #fff;
    color: #000;
    border-radius: 50px;
    font-size: 13px;
}

input[type=checkbox]{
    height: 0;
    width: 0;
    visibility: hidden;
}

.container1 label {
    cursor: pointer;
    text-indent: -9999px;
    width: 100px;
    height: 40px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
}

label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}

input:checked + label {
    background: #bada55;
}

input:checked + label::after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

label:active:after {
    width: 130px;
}
label.darkbg {
  background: #007cba !important;
}

label.lightbg {
  background: grey !important;
}
于 2021-08-23T12:00:22.863 回答