如何覆蓋 CSS 配色方案設置

Question

在 HTML 中。 現在我知道我們可以要求 CSS 在用戶更改系統配色方案時做一些事情，比如

@media (prefers-color-scheme: dark)

但是如果我想覆蓋那個設置，比如我需要在晚上使用淺色方案，但我不想更改我的系統配色方案設置，有沒有 JavaScript 或 jQuery 方法來愚弄 Z2C56C360580420D293172FZED系統很輕，或者相反），所以我可以通過點擊一些元素來切換網頁配色方案？

Answer 1

您可以為它定義兩個類。 例如。 CSS 文件中的“colourSchemeDay”和“colourSchemeNight”。 然后，您可以通過對它們進行時間限制來操作這些類。

if (time >=6AM && time <= 8PM){
    document.getElementById("myElement");
    element.classList.remove("colourSchemeNight");
    element.classList.add ("colourSchemeDay");
} else {
    document.getElementById("myElement");
    element.classList.add("colourSchemeNight");
    element.classList.remove("colourSchemeDay");
}

Answer 2

您應該首先以 24 小時格式獲取當前時間，如下所示：

var dayNight = (new Date()).getHours();

現在，您很可能有 2 個具有背景顏色的類，1 個用於白天，1 個用於夜晚。

因此，您可以使用if/else語句來決定何時使用 JQuery 添加或刪除 class。

因此，在我的示例中，當.dayNight大於或等於 7（早上 7 點）且小於 19（晚上 7 點）時，它會添加.day class 並刪除。 night class。

當.dayNight大於或等於 0（午夜 12 點）且小於 7（早上 7 點）時，它會添加.night class 並刪除.day class。

此外，當它大於或等於 19（晚上 7 點）且等於或小於 23（晚上 11 點）時，它執行相同的操作。 我們已經在上面的代碼中指定了 0（午夜 12 點），所以我們可以在這里將其設置為 23（晚上 11 點）。

嘗試這個：

 var dayNight = (new Date()).getHours(); if(dayNight>=7 && dayNight < 19) { $( "#display" ).removeClass( "night" ).addClass( "day" ); } if((dayNight>=0 && dayNight<7) || (dayNight>=19 && dayNight <=23)) { $( "#display" ).removeClass( "day" ).addClass( "night" ); }

 .day { background-color: blue; color: white; }.night { background-color: red; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="display"> Hello! </div>