تغییر متغییر 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');
})اما به مشکلی برخوردم که وقتی رو آیکون کلیک میکنم تم تغییر میکنه اما دیگه هنگام کلیک دوباره برنمیگرده به تم لایت . آیا روشی هست که بتونم این مشکلو حل کنم؟
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
فكر ميكنم بهتر اين باشه كه اين استايل ها رو به دو كلاس مختلف بديد و با 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>