Question

我在这里特别关注这个网站：

在左上角有一个暗/亮主题切换按钮，我想知道默认情况下如何启用这样的东西（在光照之前启用黑暗风格）。我一直在浏览index.html，我所能感兴趣的是这段javascript：

<body class="dark">
<script type="text/javascript">
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
  }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
  });
}

function localStorageSave(key, value) {
  if (supportsLocalStorage()) {
    localStorage.setItem(key, JSON.stringify(value));
    return true;
  }
  return false;
}

function localStorageLoad(key) {
  if (supportsLocalStorage()) {
    var value;
    try {
      value = JSON.parse(localStorage.getItem(key));
    } catch (e) {
      return false;
    }

    if (value) {
      return value;
    }
  }
  return false;
}

function supportsLocalStorage() {
  try {
    if (typeof localStorage !== 'undefined') {
      try {
          localStorage.setItem('cd_ls_test', 'yes');
          if (localStorage.getItem('cd_ls_test') === 'yes') {
              localStorage.removeItem('cd_ls_test');
              return true;
          } else {
              return false;
          }
      } catch(e) {
          return false;
      }
    }
  } catch(e) {
    return false;
  }
  return false;
}

if (supportsLocalStorage()) {
  $('body').toggleClass('dark', localStorageLoad('dark'));
}

我很感兴趣，因为我喜欢网站的整体主题，而且它很简单，但我想知道它是如何完成的，我无法掌握从哪里开始查看和编辑。

Answer 1

You can easily do this with jquery just set a dark color background on your css by default and turn it on light color with button :

$(".button").click(function(){
  
  if ($(this).hasClass("clicked")){
  $(".bg").css("background-color","black");
  $(this).removeClass("clicked");
  }
  
  else
    
    {

      $(".bg").css("background-color","white")
      $(this).addClass("clicked")}
});

body{
  margin:0px;
}

.bg{
  height:100vh;
  width: 100%;
  background-color:black;
}

.button{
  color:red;
  position:absolute;
  margin:0px;
  cursor:pointer;
  padding:20px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">
  <p class="button">Dark-light</p>
</div>

如何默认启用黑暗主题，而不是切换按钮？

1 个答案: