मेरा नीचे दिया गया कोड 99% तरीके से काम करता है। जब थीम-स्विच को टॉगल किया जाता है तो वेबसाइट सभी संबद्ध तत्वों को मेरी डार्कमोड शैलियों में बदल देती है। कुकीज का उपयोग करके विभिन्न पृष्ठों में बदलते समय डार्कमोड अपनी शैलियों को बनाए रखने में सक्षम होता है।

मैं जिस समस्या का सामना कर रहा हूं वह यह है कि किसी भिन्न पृष्ठ पर बदलते समय पृष्ठ के लिए लाइटमोड शैली एक सेकंड के लिए चमकती है इससे पहले कि डार्कमोड शैली फिर से स्वचालित रूप से प्रभावी हो जाए। मेरा मानना ​​है कि यह एक पृष्ठ लोड करने की समस्या है, लेकिन मुझे पहले से सेटअप किए गए कोड का उपयोग करके इसे ठीक करने में समस्या हो रही है।

मैं इसे बनाने की कोशिश कर रहा हूं ताकि डार्कमोड पेज से पेज पर सक्रिय रहे। सफेद या मूल पृष्ठ शैली के फ्लैश के बिना एक साफ संक्रमण जो पृष्ठों के बीच लाइटमोड है।

<!-- DARK MODE TOGGLE SWITCH -->

                <div class="theme-switch" id="index-theme-switch">
                  <div class="switch"></div>
                </div>

<!-- /DARK MODE TOGGLE SWITCH -->

नीचे दी गई स्क्रिप्ट को मेरे हेडर.php फ़ाइल में रखा गया है ताकि यह सभी पृष्ठों को तदनुसार प्रभावित करे। जब थीम-स्विच को टॉगल किया जाता है, तो नीचे दी गई सभी डार्कमोड शैलियों को पृष्ठों पर लागू किया जाता है:


<script>


jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("body, div#margin-min, ul.menu, .sidenav").toggleClass("dark-theme");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("body, div#margin-min, ul.menu, .sidenav").addClass("dark-theme");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("div#margin-min").toggleClass("dark-theme-marginmin");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("div#margin-min").addClass("dark-theme-marginmin");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("p.uppercase, .page-id-536 li p, .page-id-91 p").toggleClass("dark-theme-description");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("p.uppercase, .page-id-536 li p, .page-id-91 p").addClass("dark-theme-description");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("i.sf-icon-star-full, .page-id-536 i.sf-icon-star-full").toggleClass("dark-theme-star");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("i.sf-icon-star-full, .page-id-536 i.sf-icon-star-full").addClass("dark-theme-star");
  }
});


jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("div.cell").toggleClass("dark-theme-cellborder");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("div.cell").addClass("dark-theme-cellborder");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("li.menu-item").toggleClass("dark-theme-sitenavborder");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("li.menu-item").addClass("dark-theme-sitenavborder");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $(".left a, ul.menu").toggleClass("dark-theme-navlinks");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $(".left a, ul.menu").addClass("dark-theme-navlinks");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("span.btn-bg, span.inner").toggleClass("dark-theme-buttons");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("span.btn-bg, span.inner").addClass("dark-theme-buttons");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $(".navbar").toggleClass("dark-theme-mobile-navbar");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $(".navbar").addClass("dark-theme-mobile-navbar");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $(".site-searchform input").toggleClass("dark-theme-search-input");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $(".site-searchform input").addClass("dark-theme-search-input");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $(".color-cat0 a, .color-cat01 a, .color-cat2 a, .color-cat3 a, .color-cat4 a, .color-cat5 a, .color-cat6 a, .color-cat7 a, .color-cat8 a, .color-cat9 , .color-cat10 a, .color-cat11 a, .color-cat12 a, .color-cat13 a, .color-cat14 a, .color-cat15 a, .color-cat16 a").toggleClass("dark-theme-nav-pointer");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $(".color-cat0 a, .color-cat01 a, .color-cat2 a, .color-cat3 a, .color-cat4 a, .color-cat5 a, .color-cat6 a, .color-cat7 a, .color-cat8 a, .color-cat9 , .color-cat10 a, .color-cat11 a, .color-cat12 a, .color-cat13 a, .color-cat14 a, .color-cat15 a, .color-cat16 a").addClass("dark-theme-nav-pointer");
  }
});



</script>

डार्कमोड के लिए सीएसएस:


 .theme-switch .switch {
   background: white;
   width: 15px;
   height: 15px;
   background: var(--background);
   border-radius: 100%;
   position: absolute;
   top: 3px;
   left: 3px;
   transition: 0.5s all ease;
}

 .dark-theme {
   --background: #fff;
   --text: #000;
   background-color: var(--darkbackground) !important;
}

.dark-theme-marginmin {
   --background: #fff;
   --text: #000;
   border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
   background-color: var(--darkbackground) !important;
}

 .dark-theme-description {
 color: #d1d1d1 !important;
}

 .dark-theme-cellborder {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
 }

 .dark-theme-sitenavborder {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
 }

 .dark-theme-navlinks {

 }

 .dark-theme-buttons {
   --background: #fff;
   --text: #000;
   background-color: var(--darkbackground) !important;
   color: grey !important;
   border-color: grey !important;
}

 .dark-theme .theme-switch {
   background: var(--text);
}

 .dark-theme .theme-switch .switch {
   transform: translateX(14px);
}

 .dark-theme-star {
color: grey !important;
}

@media screen and (max-width: 768px) {
.dark-theme-mobile-navbar {
   --background: #fff;
   --text: #000;
   background-color: var(--darkbackground) !important;
}
}

.dark-theme-search-input[type=text]:focus {
    background-color: #d1d1d1 !important;
}

.dark-theme-nav-pointer:hover:after {           /* Nav Hover Pointer*/
      border-right-color: var(--darkbackground) !important;
}

.dark-theme-nav-pointer:after {           /* Nav Hover Pointer*/
      border-right-color: var(--darkbackground) !important;
}

0
Guyku 29 फरवरी 2020, 23:57

1 उत्तर

मेरा मानना ​​है कि यह एक पेज लोड करने की समस्या है

आप आंशिक रूप से सही हैं। हां, इसका पेज लोडिंग से कोई लेना-देना नहीं है, और जावास्क्रिप्ट प्रारंभिक पेज पेंट से पहले नहीं चल रहा है। हालाँकि आप इसे फ़्रंट-एंड कोड के साथ मज़बूती से हल नहीं कर सकते। चूंकि आपके जावास्क्रिप्ट को विशिष्ट ब्राउज़र के कार्यान्वयन विवरण के कारण निष्पादित करने का मौका मिलने से पहले स्क्रीन का प्रारंभिक पेंट हो सकता है।

मेरी सिफारिश होगी कि आप अपने सर्वर पर प्रत्येक विषय के लिए आवश्यक शैलियों को इंजेक्ट करें और अपनी थीम शैलियों को इनलाइन सीएसएस के रूप में भेजें। अधिमानतः एक पृष्ठभूमि संपत्ति के साथ वास्तविक शरीर पर सेट, ब्राउज़र को एक उपयुक्त रंग के साथ प्रारंभिक लेआउट पर पृष्ठभूमि को पेंट करने की अनुमति देने के लिए। इस तरह, जब उपयोगकर्ता टॉगल स्विच को फ़्लिप करता है तो आप सर्वर को एक HTTP अनुरोध भेजते हैं, इसे अद्यतन थीम वरीयता के बारे में बताते हुए। फिर आप थीम को तुरंत लागू करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं (उसी तरह जैसे आप अभी कर रहे हैं) लेकिन सर्वर (यदि आपने इसे लागू किया है) सुनिश्चित करेगा कि अगली बार पेज लोड होने पर सही थीम डिफ़ॉल्ट रूप से लागू हो।

नोट: यदि आप पृष्ठ लोड को तेज करने के लिए ब्राउज़र कैश पर निर्भर हैं तो आपको यह सुनिश्चित करने के लिए अपनी html फ़ाइल को फ़िंगरप्रिंट करने की आवश्यकता हो सकती है कि विषय बदलने पर यह अपडेट हो जाए।

जावास्क्रिप्ट में थीम लागू करना

document.body.style.backgroundColor = "black";
document.querySelectorAll('h1').forEach(el => {
  el.style.color = 'white';
});
<document>
  <body>
    <h1>Dark theme applied with js</h1>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--Above import are for simluated load times of vendor libraries-->
  <script src="#">/*pretend inport for our script*/</script>
</document>

थीम इनलाइन को सर्वर द्वारा प्रदान की गई शैलियों के रूप में लागू करना

<document>
  <head>
    <style>
    body {
      background: black;
    }
    h1 {
      color: white;
    }
    </style>
  </head>
  <body>
    <h1>Dark theme applied with inline styles</h1>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--Above import are for simluated load times of vendor libraries-->
  <script src="#">/*pretend inport for our script*/</script>
</document>
0
Olian04 1 मार्च 2020, 00:19