CODEWITHSUNDEEP
javascripthtmljquerycsslocal-storage
raffaelbaer
raffaelbaer

Reputation: 7

How to make Jquery Darkmode load directly on the beginning?

So I have set up a theme switcher on my site, which stores preference in localStorage and everything works fine. Except that my code is loaded after document.ready, and checks for condition / status of theme. I also tried removing document.ready, because obviously that would remove any finishing of loading the site, but that doesn't work, and the function starts direct on load and obviously can't change any CSS, because there isn't any. For now, I am using a preloader, which is working fine, but it would be awesome if it could work without it. I have also placed the code at the beginning of the body tag, so it should execute really early. In the following, I will show you my code and a screenshot of my console, where you can see when the code gets executed. For your knowledge, I am on Shopify, if that does anything.

Any help for making my theme / code switch faster, is very much appreciated.

My Console: console img...

My Code (I am sorry for the formatting, I made if farly quickly in the Shopify admin, so no "Prettier" and also no "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();
});

Upvotes: 0

Views: 800

Answers (1)

connexo
connexo

Reputation: 56754

For a dark mode switch, simply toggle a CSS class on the HTML element (document.documentElement.classList.toggle('dark');), and use that as a contextual selector for changes on your elements. Use CSS custom properties for the changes.

Here's an example of the approach. Please note that localStorage is unavailable in StackOverflow snippets due to security reasons, so I left that part out (you've got that working already anyway).

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>

Upvotes: 3

Related Questions