如何讓 Jquery Darkmode 直接加載到開頭？

Question

所以我在我的網站上設置了一個主題切換器，它將首選項存儲在 localStorage 中並且一切正常。 除了我的代碼是在 document.ready 之后加載的，並檢查主題的條件/狀態。 我也嘗試刪除 document.ready，因為顯然這會刪除加載站點的任何完成，但這不起作用，function 直接在加載時啟動並且顯然不能更改任何 CSS，因為沒有任何。 現在，我正在使用預加載器，它工作正常，但如果沒有它也能工作，那就太棒了。 我還將代碼放在 body 標簽的開頭，所以它應該很早就執行。 在下文中，我將向您展示我的代碼和我的控制台的屏幕截圖，您可以在其中看到代碼何時執行。 據您所知，我正在撥打 Shopify，如果有的話。

非常感謝任何有助於加快我的主題/代碼切換速度的幫助。

我的控制台：控制台 img ...

我的代碼（對於格式，我很抱歉，我在 Shopify 管理員中制作得非常快，所以沒有“Prettier”，也沒有“IntelliSense”:)）

 // Darkmode @legoon @raffaelbaer let ALLDARKMODE = '#over-header-info-bar-legoon, #StickyBar, .full-width--return-link,' + '.cart__subtotal, .transcy-money, .site-footer__newsletter-input, #product-title__cart-page-legoon, .cart-table,' + '.responsive-table__row, label, .gridforsubcategories_item-grid, .linkitem_hassubcategoriesinner, .sticky--active, .sticky--open,' + '.icon-hamburger, .icon-close, .drawer__inner, #einloggendrawerlink, .drawer__nav-link--top-level, .einloggensvgmobile, .drawer__search,' + '.drawer__search-input, #legooninstagrammobile, #instagramiconheadermobile, .svgdarkmode, .drawer__nav-item, .drawerforsocialicons, #footerlegoonlink,' + '.content-block, .icon-arrow-down, .product-card__name, .product-card__info, .country-selector, .site-header__search-input, .menu-sub-custom1, .menu-sub-custom2,' + '.labelcustomnav1, .labelcustomnav2, .labelcustomnav3, .labelcustomnav4, .menu-sub-custom3, .menu-sub-custom4, .nav-bar, h1, h2, #footer-down_copyright, h3, h4, h5,' + 'h6, body, a, input, textarea, select, .link-item>a, #instagramiconheader, .site-footer, .site-footer__copyright, .darkmodeswitch, p, .site-footer__newsletter-label>p,' + 'button, #icon-wunschliste, .page-container, .labelcustomnav1>p, .labelcustomnav2>p, .labelcustomnav3>p, .labelcustomnav4>p, .site-header, .legoonlogotop, .iconuserhead, .icon-cart,' + '.notification--success, .notification--promo, .notification__message>span, .wg-drop.country-selector, .hr-empfy_cart-page'; $(document).ready(function() { $('.darkmodeswitch').click(function() { /*main toggle dark mode*/ $(ALLDARKMODE).toggleClass("dark"); /*change darkmode image on mobile drawer and desktop accordingly to current mode | theme (light or dark)*/ if ($(".darkmodeswitch").hasClass("dark")) { document.getElementById('svgdarkmode').src = "https://cdn.shopify.com/s/files/1/0571/7137/8349/files/sun.svg?v=1650307091"; document.getElementById('svgdarkmodemobile').src = "https://cdn.shopify.com/s/files/1/0571/7137/8349/files/sun.svg?v=1650307091"; localStorage.setItem("theme", "dark"); } else { document.getElementById('svgdarkmode').src = "https://cdn.shopify.com/s/files/1/0571/7137/8349/files/moon.svg?v=1650306791"; document.getElementById('svgdarkmodemobile').src = "https://cdn.shopify.com/s/files/1/0571/7137/8349/files/moon.svg?v=1650306791"; localStorage.setItem("theme", "light"); }; }); // Am Anfang if (localStorage.getItem("theme") === "dark") { console.log("Darkmode status = true"); $(ALLDARKMODE).addClass("dark"); } else { console.log("Darkmode status = false"); $(ALLDARKMODE).removeClass("dark"); } $('.darkmodeswitch').click(); });

Answer 1

對於暗模式開關，只需在 HTML 元素 ( document.documentElement.classList.toggle('dark'); ) 上切換 CSS class，並將其用作元素更改的上下文選擇器。 使用 CSS 自定義屬性進行更改。

這是該方法的示例。 請注意，由於安全原因， localStorage在 StackOverflow 代碼片段中不可用，因此我省略了該部分（無論如何您已經可以使用了）。

 function toggleDarkMode() { document.documentElement.classList.toggle('dark'); }

 :root { --body-bg-color: #fff; --btn-bg-color: #f0f0f0; --btn-fg-color: #333; }:root.dark { --body-bg-color: #666; --btn-bg-color: #333; --btn-fg-color: #f0f0f0; } body { background-color: var(--body-bg-color); } button { background-color: var(--btn-bg-color); border: 1px solid #888; color: var(--btn-fg-color); }

 <button type="button" id="toggle" onclick="toggleDarkMode()">Dark Mode Button</button>