Edit in JSFiddle

// Functions
$(document).ready(function() {

  // Cookie
  function setCookie(name, value, days) {
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
  }

  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

  function eraseCookie(name) {
    createCookie(name, "", -1);
  }

  // Pageskin cookie
  $(".pageskin-remove").click(function() {
    setCookie("pageskinbg", "var", 1);
    $('.pageskin').css({
      'display': 'none',
      'visibility': 'hidden',
      'background': 'none'
    });
  });
  $(".pageskin").toggle(!getCookie("pageskinbg"));

  if (!getCookie('pageskinbg')) {
    $('.pageskin').removeClass('hide');
  }

  // Navigation
  setTimeout(function() {
    $('.ff-hide').each(function() {
      $(this).removeClass('ff-hide');
    });
  }, 400);

  // Switcher
  $(".switcher-mode-on").click(function() {
    setCookie("dark-style-cookie", "var", 30);
    $('.switcher-mode-off').removeClass('hide');
    $('.switcher-mode-on').addClass('hide');
    $('head').append('<link rel="stylesheet" href="https://guley.co/demo/style-dark.css" type="text/css" />');
  });

  if (getCookie('dark-style-cookie')) {
    $('.switcher-mode-off').removeClass('hide');
    $('head').append('<link rel="stylesheet" href="https://guley.co/demo/style-dark.css" type="text/css" />');
  }

  if (!getCookie('dark-style-cookie')) {
    $('.switcher-mode-on').removeClass('hide');
  }

  $(".switcher-mode-off").click(function() {
    setCookie("dark-style-cookie", "", -1);
    $('link[href="https://guley.co/demo/style-dark.css"]').remove();
    $('.switcher-mode-off').addClass('hide');
    $('.switcher-mode-on').removeClass('hide');

  });

});
<!DOCTYPE html>
<html lang="tr-TR">

  <head>
    <meta charset="UTF-8">
    <title>Night Mode</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="switch.css" media="all" rel="stylesheet" type="text/css">
    <script src="switch.js" type="text/javascript">
    </script>
  </head>

  <body class="home blog">
    <header class="site-header">
      <div class="wrap">
        <div class="site-title" itemprop="headline">
          <div class="switcher">
            <a class="switcher-mode-on hide">Night Mode On</a> <a class="switcher-mode-off hide">Night Mode Off</a>
          </div>
        </div>
      </div>
    </header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut elit vel justo consequat tincidunt ut eu sem. Duis et vestibulum magna. Nulla fringilla mi non tincidunt dapibus. Etiam vel ornare dolor. Proin eu feugiat metus. Sed eget lectus lobortis
        dolor auctor placerat non eu nulla. Aenean ullamcorper imperdiet tristique. Curabitur quis ante neque. Cras ornare tempus elit, nec eleifend mi congue non. Integer id laoreet libero. Proin laoreet leo in sem accumsan, nec porta enim ornare. Phasellus
        dictum erat malesuada, facilisis dui sit amet, scelerisque velit. Cras non mattis velit.
      </p>
    </main>
  </body>

</html>
.switcher {
  height: auto;
  margin-left: 20px;
  color:red
}

.switcher a {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  font-style: normal;
  line-height: 1;
  padding: 5px 10px;
  border: red;
  color: red;
  border-radius: 2px
}

.switcher a:hover {
  border: 1px solid red;
  color: red
}

.pageskin .pageskin-remove,
.switcher a {
  text-transform: uppercase;
  cursor: pointer
}

.ff-hide,
.hide {
  display: none !important
}

@media only screen and (max-width:1020px) {
  .switcher a {
    font-weight: 400;
    letter-spacing: 0;
    padding: 5px
  }