如何默認啓用黑暗主題，而不是切換按鈕？

在左上角有一個暗/燈光主題切換按鈕，我想知道如何讓這樣的事情在默認情況下（黑暗風格將在明亮之前啓用）。我一直在尋找通過的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')); 
}

我很感興趣，因爲我喜歡這個網站的整體主題，這很簡單，但我想知道它是如何完成的，我無法掌握從哪裏開始尋找和編輯。

來源

2017-04-09 slutexpress

什麼是默認啓用的意思嗎？哪裏？在你自己的網站上還是在這個網站上？ –

如果您正在尋找源代碼......它在頁面上的script.js中。這是綁定到函數toggleTheme（） –

我做了一個網站的副本，所以我現在正在玩弄元素。默認情況下，頁面是一個輕的主題，但是當切換頂部時，它變成黑色。我試圖找出如何在默認情況下啓用黑暗主題，並且開關將切換輕的主題。 – slutexpress

您可以輕鬆地做到這一點與jQuery只設置在默認情況下你的CSS深色背景和按鈕，打開它的光色：

$(".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>

來源

2017-04-10 00:47:36 vlk

如何默認啓用黑暗主題，而不是切換按鈕？

回答

相關問題