تغییر متغییر css با جاوا اسکریپت
سلام دوستان وقتتون بخیر . سوالی داشتم در مورد تغییر دادن مقادیر متغییر های css .
بنده برای ایجاد دارک مود تو سایت چندتا متغییر css تعریف کردم به شکل زیر:
:root{
--primary-color : #FFB830;
--secondary-color: #3DB2FF;
--text-color : #11052C;
}بعد برا تغییرشون با جاوا اسکریپت فانکشنی ایجادکردم که هنگام کلیک روی آیکون تغییر تم اجرا میشه
darkModeIcon.addEventListener("click",()=>{
var root = document.querySelector(':root');
root.style.setProperty('--primary-color','#323F48');
root.style.setProperty('--secondary-color','#1F2933');
root.style.setProperty('--table-text','#ffffff');
})اما به مشکلی برخوردم که وقتی رو آیکون کلیک میکنم تم تغییر میکنه اما دیگه هنگام کلیک دوباره برنمیگرده به تم لایت . آیا روشی هست که بتونم این مشکلو حل کنم؟
پاسخها
3
فكر ميكنم بهتر اين باشه كه اين استايل ها رو به دو كلاس مختلف بديد و با js فقط كلاس تگ body رو عوض كنيد
ممنون از پاسختون.راستش این استایل هارو میخاستم به تگ thead و tbody یه جدول بدم و ابتدا به روشی که گفتید دوتا کلاس ساختم و با classList.toggle کلاس هارو بهشون دادم هنگام کلیک ولی متاسفانه رو جدول عمل نکرد نمیدونم مشکل از کجا بود
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
در قسمت addEventListener شما فقط دستور اخر اجرا میشه
<body>
<style>
.middle {
text-align: center;
margin: 10%;
}
.green {
color: green;
}
.red {
color: red;
}
.blue {
color: blue;
}
</style>
<div class="middle">
<button>Change Color</button>
<h1>Color one</h1>
</div>
<script>
var btn = document.querySelector("button");
btn.addEventListener('click', ()=>{
document.querySelector('h1').classList.toggle('red');
});
</script>
</body>