色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

加載頁面時快速執行JavaScript

CSS
錢斌斌1年前8瀏覽0評論

我為我的WordPress站點創建了一個黑暗模式。

我的代碼有四種模式:

1-基于用戶的系統

雙燈模式

3-半照明模式

4-黑暗模式

它已經被放置并且完美地工作。

我的問題是，當頁面加載時，代碼是不活動的。

加載頁面后，我的代碼是不活動的，要激活它，您必須單擊它的一個模式來激活所有的腳本。我希望我的代碼在頁面的任何狀態下都是活動的。

let bodyMode = document.querySelector("#pageMode");
let SystemMode = document.querySelector(".pageSystemMode");
let DarkMode = document.querySelector(".pageDarkMode");
let LightMode = document.querySelector(".pageLightMode");
let HalfLitMode = document.querySelector(".pageHalfLitMode");

SystemMode.addEventListener("click", function () {

    const UserMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

    if (UserMode) {
        $(bodyMode).addClass("bodyDark");
        $(bodyMode).removeClass("bodyLight bodyHalfLit");
    } else {
        $(bodyMode).removeClass("bodyLight bodyDark bodyHalfLit");
    }

});

DarkMode.addEventListener("click", function () {
    $(bodyMode).addClass("bodyDark");
    $(bodyMode).removeClass("bodyHalfLit");
});

HalfLitMode.addEventListener("click", function () {
    $(bodyMode).addClass("bodyHalfLit");
    $(bodyMode).removeClass("bodyDark");
});

LightMode.addEventListener("click", function () {
    $(bodyMode).addClass("bodyLight");
    $(bodyMode).removeClass("bodyDark bodyHalfLit");
});

.main-selectMode {
  position: absolute;
  top: 20%;
  left: 2%;
}

a.main-btn {
  font-weight: 900;
  padding: 10px;
  direction: rtl;
  color: #fff;
  background: #2512b0;
  border: none;
  box-shadow: 0 0 4px #000, 0 0 4px #fff;
}



a.main-btn:hover,
.btn-secondary:hover,
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: #fff;
  background: #2512b0;
  border: none;
  box-shadow: 0 0 4px #000, 0 0 4px #fff;
}

.main-btn::before {
  margin: 0 7px 0 10px;
}

.main-btn::after {
  margin: 0 10px 0 7px;
}

ul.pageMode li:hover a {
  background: #0058ff;
  color: #fff;
}

ul.pageMode li a {
  direction: rtl;
  padding: 10px;
  text-align: right;
}

ul.pageMode li a::before {
  margin: 0 7px 0 10px;
}

/* ***************  Mode ******************* */

#pageMode {
  background: #eee;
}

.bodyLight {
  background: #ccc !important;
}

.bodyDark {
  background: #0b0312 !important;
}

.bodyHalfLit {
  background: #777281 !important;
}

<link  rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<link  rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="pageMode">

    <div class="dropdown main-selectMode">
        <a class="fas fa-desktop main-btn btn btn-secondary dropdown-toggle" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">
            Page mode
        </a>

        <ul class="dropdown-menu pageMode">
            <li class="SystemMode"><a class="fas fa-desktop pageSystemMode dropdown-item">Assumption</a></li>
            <li class="LightMode"><a class="fas fa-sun pageLightMode dropdown-item">Light mode</a></li>
            <li class="LightMode"><a class="fas fa-cloud-sun pageHalfLitMode dropdown-item">Semi-lit mode</a></li>
            <li class="DarkMode"><a class="fas fa-moon pageDarkMode dropdown-item">Dark mode</a></li>
        </ul>
    </div>


</body>

定義一個用于啟動主題的函數，并立即調用它或通過單擊:

function initTheme(){

        const UserMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    
        if (UserMode) {
            $(bodyMode).addClass("bodyDark");
            $(bodyMode).removeClass("bodyLight bodyHalfLit");
        } else {
            $(bodyMode).removeClass("bodyLight bodyDark bodyHalfLit");
        }
}

//Click listener

SystemMode.addEventListener("click", function () {
   initTheme();
});


//immediate firing:
initTheme();