मेरे पास एक ऐप है जो लाइट मोड और डार्क मोड में है। मैं गतिशील रूप से केवल डार्क मोड के लिए एक चर सेट करना चाहता हूं। मेरे पास वर्तमान में जो समस्या है वह है डायनामिक वैरिएबल लाइट मोड और डार्क मोड दोनों के लिए सेट किया जा रहा है।

यहाँ एक उदाहरण है:

$('#theme-btn').on('click', function() {
  //simple check if light then turn dark, and vice-versa 
  if($('html').attr('theme') === 'light') {
    $('html').attr('theme', 'dark');
  } else {
    $('html').attr('theme', 'light');
  }
})

$('#change-dark').on('click', function() {

  //set new dark mode primary color
  let dark_color = "#FF48C9"
    $("html[theme='dark']").get(0).style.setProperty("--primary", dark_color);

})
html[theme="light"] {
  --primary: #f6f6f6;
}

html[theme="dark"] {
  --primary: #121212;
}

.background {
  background: var(--primary);
  width: 100%;
  height: 60px;
  margin-bottom: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html theme="light">
<body>

<div class="background"></div>

<button id="theme-btn">Change theme</button>
<button id="change-dark">Dynamically change dark mode color</button>

</body>
</html>

परीक्षा करना:

  1. Change theme बटन पर कई बार क्लिक करें।
  2. लाइट मोड पर होने पर, Dynamically change dark mode color क्लिक करने का प्रयास करें.. त्रुटि होनी चाहिए
  3. अगला, डार्क मोड में बदलें, अब Dynamically change dark mode color पर क्लिक करें.. डायनामिक वैरिएबल सेट हो जाता है।
  4. लाइट मोड में बदलें, और डायनेमिक वैरिएबल लाइट और डार्क मोड दोनों के लिए सेट है...

मैं डायनामिक वैरिएबल को केवल डार्क मोड के लिए बदलने के लिए कैसे प्राप्त कर सकता हूं।

अगर किसी के पास कोई विचार है तो यह बहुत अच्छा होगा। धन्यवाद।

0
Simon 18 फरवरी 2021, 02:19

2 जवाब

सबसे बढ़िया उत्तर

आप दूसरी सीएसएस कस्टम प्रॉपर्टी का उपयोग कर सकते हैं, जो बटन क्लिक करने पर समायोजित हो जाती है, और --primary उस कस्टम प्रॉपर्टी का उपयोग या तो कर सकते हैं (यदि यह मान्य है) - या, यदि मान्य नहीं है, मूल रंग (#121212 का):

html[theme="light"] {
  --primary: var(--primary-light-custom, #f6f6f6);
}

html[theme="dark"] {
  --primary: var(--primary-dark-custom, #121212);
              /*   ^^^ used if valid     ^^^^^^ fallback value */
}
$("html").get(0).style.setProperty("--primary-dark-custom", dark_color);
$('html').attr('theme', 'light'); // to properly emulate your markup
      // in this Stack Snippet

$('#theme-btn').on('click', function() {
  //simple check if light then turn dark, and vice-versa 
  $('html').attr('theme',
    $('html').attr('theme') === 'light' ? 'dark' : 'light'
  );
})

$('#change-dark').on('click', function() {
  //set new dark mode primary color
  let dark_color = "#FF48C9"
  $("html").get(0).style.setProperty("--primary-dark-custom", dark_color);

})
html[theme="light"] {
  --primary: var(--primary-light-custom, #f6f6f6);
}

html[theme="dark"] {
  --primary: var(--primary-dark-custom, #121212);
}

.background {
  background: var(--primary);
  width: 100%;
  height: 60px;
  margin-bottom: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background"></div>

<button id="theme-btn">Change theme</button>
<button id="change-dark">Dynamically change dark mode color</button>
2
CertainPerformance 18 फरवरी 2021, 02:24

एक अतिरिक्त चर पर विचार करें ताकि आप दोनों को स्वतंत्र रूप से आसानी से प्रबंधित कर सकें

$('#theme-btn').on('click', function() {
  //simple check if light then turn dark, and vice-versa 
  if($('html').attr('theme') === 'light') {
    $('html').attr('theme', 'dark');
  } else {
    $('html').attr('theme', 'light');
  }
})

$('#change-dark').on('click', function() {
  //set new dark mode primary color
  let dark_color = "#FF48C9"
    $("html").get(0).style.setProperty("--dark", dark_color);

})
html[theme="light"] {
  --primary: var(--light,#f6f6f6);
}

html[theme="dark"] {
  --primary:var(--dark,#121212);
}


.background {
  background: var(--primary);
  width: 100%;
  height: 60px;
  margin-bottom: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html theme="light">
<body>

<div class="background"></div>

<button id="theme-btn">Change theme</button>
<button id="change-dark">Dynamically change dark mode color</button>

</body>
</html>
2
Temani Afif 18 फरवरी 2021, 02:25