在html/css中切換頁面背景顏色

Question

在我的HTML/CSS頁面上，我需要切換背景顏色和文本顏色。 （例如以白色爲主題的黑色主題）。有沒有辦法做到這一點？

Answer 1

結帳這樣的：

$("#toggleTheme").click(function(){ 
 
$(".container").toggleClass("black"); 
 
});

.container { 
 
\t background: #fff; 
 
\t color: #000; 
 
} 
 
.black { 
 
\t background: #000; 
 
\t color: #fff; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button class="btn btn-primary" id="toggleTheme">Toggle Theme</button> 
 

 
<div class="container"> 
 
\t <h1>Welcome</h1> 
 
\t <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p> 
 
</div>

Answer 2

嘗試是這樣的jQuery中：

$("#button").click(function() { 
    $(document.body).toggleClass("black"); 
}); 

CSS: 

body { background-color: white; } 
.black { background-color: black; }