Wie aktiviert man standardmäßig ein dunkles Theme anstelle der Umschalttaste?

Ich suche speziell an dieser Stelle hier:Wie aktiviert man standardmäßig ein dunkles Theme anstelle der Umschalttaste?

In der linken oberen Ecke ein dunkel/hell Thema Umschaltknopf ist, und ich wollte wissen, wie standardmäßig, so etwas zu ermöglichen (dunkler Stil würde vor Licht aktiviert werden). Ich habe durch die index.html suchen, und alles, was ich von Interesse sehen kann, ist das JavaScript-Schnipsel:

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

Ich bin interessiert, weil ich das übergreifende Thema der Seite gefällt und es ist Einfachheit, aber ich wollte wissen, wie es gemacht wurde, und ich kann nicht begreifen, wo ich anfangen soll zu suchen und zu editieren.

Quelle

2017-04-09 slutexpress

Was bedeutet standardmäßig nicht aktiviert? Woher? Auf Ihrer eigenen Website oder auf dieser Website speziell? –

Und wenn Sie nach der Quelle suchen ... Es ist in script.js auf der Seite. Es ist an die Funktion gebunden toggletheme() –

Ich habe eine Kopie der Seite gemacht, aber ich spiele gerade mit Elementen herum. Standardmäßig ist die Seite ein helles Thema, beim Umschalten des oberen Schalters wird jedoch dunkel. Ich habe versucht, herauszufinden, wie man das dunkle Thema standardmäßig aktiviert, und der Schalter würde das helle Thema umschalten. – slutexpress

Sie können dies ganz einfach mit jquery setzen nur eine dunkle Farbe Hintergrund auf Ihrem CSS standardmäßig und schalten Sie ihn auf Lichtfarbe mit der Taste:

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

Quelle

2017-04-10 00:47:36 vlk

Wie aktiviert man standardmäßig ein dunkles Theme anstelle der Umschalttaste?

Antwort

Verwandte Themen