Переключатель темного режима

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 'Dar Mode', добавьте dark-mode класс перед каждым селекторов.
т.е.

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

и т.д ...

Тогда в ваших JS, просто переключить класс 'темно-режим' для тела. Я думаю, что это может быть более эффективно.

Попробуйте подобную демо:

http://jsfiddle.net/7Lfv0jqL/