javascript - Dark mode switch - Stack Overflow

admin管理员组

文章数量:1405734

I am trying to make a website that can be turned to 'dark mode' when a checkbox is selected. I have styled the checkbox to look like a switch. I have it working with some javascript to load an alternate stylesheet 'onChange'. This works fine, the problem is, when you uncheck the box, I would like it to load the original stylesheet again. Any help would be greatly appreciated. I am new to javascript and would like to learn more. The following is my HTML, CSS & Javascript code:

<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
// .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 )
{
    // .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 )
{
    // .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 '' ;
}

I am trying to make a website that can be turned to 'dark mode' when a checkbox is selected. I have styled the checkbox to look like a switch. I have it working with some javascript to load an alternate stylesheet 'onChange'. This works fine, the problem is, when you uncheck the box, I would like it to load the original stylesheet again. Any help would be greatly appreciated. I am new to javascript and would like to learn more. The following is my HTML, CSS & Javascript code:

<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./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./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./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 '' ;
}

• javascript
• html
• css

Share Improve this question Follow asked Feb 6, 2015 at 2:02 user4044861user4044861 4

• 1 Why not, in the function switch_style, check if the checkbox is checked or not, and change the style based on that? – jonhopkins Commented Feb 6, 2015 at 2:06
• switch_style takes an argument saying which style to enable. So in your click handler, check whether the checkbox is checked, and call the function with the appropriate title. – Barmar Commented Feb 6, 2015 at 2:07
• Thanks for the help... Could you demonstrate how to do that? I had copy & pasted that javascript code. I know very baritone javascript and thats all. Thanks @jonhopkins – user4044861 Commented Feb 6, 2015 at 2:08
• I'm blanking on how to do it @Barmar's way, but my way is in the function, something like if (document.getElementById('switch1').checked) { css_title = 'alt'; } else { css_title = 'normal'; } – jonhopkins Commented Feb 6, 2015 at 2:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try this workaround:

For your 'Dar Mode' css, add the dark-mode class before each selectors.
i.e.,

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

etc...

Then in your JS, just toggle the class 'dark-mode' for the body. I think it might be more effecient that way.

Try this similar demo:

http://jsfiddle/7Lfv0jqL/

本文标签： javascriptDark mode switchStack Overflow