暗模式开关

Question

我试图制作一个网站，当选择一个复选框时可以转到'暗模式'。我将复选框设计为看起来像一个开关。我使用一些JavaScript来加载替代样式表'onChange'。这工作正常，问题是，当您取消选中该框时，我想再次加载原始样式表。任何帮助将不胜感激。我是JavaScript新手，想了解更多信息。以下是我的HTML，CSS & Javascript代码：

<input type="checkbox" id="switch1" name="switch1" class="switch" onchange="switch_style('alt');"/> 
<label for="switch1">Dark Mode</label> 


/* This is for the dark mode switch */ 
input.switch:empty 
{ 
    margin-left: -999px; 
} 
input.switch:empty ~ label 
{ 
    position: relative; 
    float: left; 
    line-height: 1.6em; 
    text-indent: 4em; 
    margin: 0.2em 0; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 
input.switch:empty ~ label:before, 
input.switch:empty ~ label:after 
{ 
    position: absolute; 
    display: block; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    content: ' '; 
    width: 3.6em; 
    background-color: #c33; 
    border-radius: 0.3em; 
    box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3); 
    -webkit-transition: all 100ms ease-in; 
    transition: all 100ms ease-in; 
} 

input.switch:empty ~ label:after 
{ 
    width: 1.4em; 
    top: 0.1em; 
    bottom: 0.1em; 
    margin-left: 0.1em; 
    background-color: #fff; 
    border-radius: 0.15em; 
    box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2); 
} 
input.switch:checked ~ label:before 
{ 
    background-color: #393; 
} 

input.switch:checked ~ label:after 
{ 
    margin-left: 2em; 
} 

---

// *** TO BE CUSTOMISED *** 

var style_cookie_name = "style" ; 
var style_cookie_duration = 30 ; 

// *** END OF CUSTOMISABLE SECTION *** 
// You do not need to customise anything below this line 

function switch_style (css_title) 
{ 
// You may use this script on your site free of charge provided 
// you do not remove this notice or the URL below. Script from 
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml 
    var i, link_tag ; 
    for (i = 0, link_tag = document.getElementsByTagName("link") ; 
    i < link_tag.length ; i++) { 
    if ((link_tag[i].rel.indexOf("stylesheet") != -1) && 
     link_tag[i].title) { 
     link_tag[i].disabled = true ; 
     if (link_tag[i].title == css_title) { 
     link_tag[i].disabled = false ; 
     } 
    } 
    set_cookie(style_cookie_name, css_title, 
     style_cookie_duration); 
    } 
} 
function set_style_from_cookie() 
{ 
    var css_title = get_cookie(style_cookie_name); 
    if (css_title.length) { 
    switch_style(css_title); 
    } 
} 
function set_cookie (cookie_name, cookie_value, 
    lifespan_in_days, valid_domain) 
{ 
    // http://www.thesitewizard.com/javascripts/cookies.shtml 
    var domain_string = valid_domain ? 
         ("; domain=" + valid_domain) : '' ; 
    document.cookie = cookie_name + 
         "=" + encodeURIComponent(cookie_value) + 
         "; max-age=" + 60 * 60 * 
         24 * lifespan_in_days + 
         "; path=/" + domain_string ; 
} 
function get_cookie (cookie_name) 
{ 
    // http://www.thesitewizard.com/javascripts/cookies.shtml 
    var cookie_string = document.cookie ; 
    if (cookie_string.length != 0) { 
     var cookie_value = cookie_string.match (
         '(^|;)[\s]*' + 
         cookie_name + 
         '=([^;]*)'); 
     return decodeURIComponent (cookie_value[2]) ; 
    } 
    return '' ; 
} 

Answer 1

尝试以下解决方法：

为了您的 '达累斯萨拉姆模式' 的CSS，每个选择前添加dark-mode类。
即

.dark-mode input { } 
.dark-mode input.switch:empty ~ label { } 

等等

然后在你的JS，只需拨动类 '暗模式' 的身体。 我认为这种方式可能更有效。

试试这个类似的演示：

http://jsfiddle.net/7Lfv0jqL/