CSS Change Variables With JavaScript

متغیرهای CSS (همون Custom Properties یا Variables) رو می‌تونیم خیلی راحت با جاوااسکریپت تغییر بدیم.
این کار بیشتر برای تعویض تم (Dark/Light) یا تغییر داینامیک رنگ‌ها و سایزها استفاده میشه.

🔹 ساختار کلی

برای تغییر متغیر باید از متد زیر استفاده کنیم:

element.style.setProperty("--variable-name", "newValue");

🔹 مثال ۱: تغییر رنگ پس‌زمینه با JS

<body>
  <button onclick="changeTheme()">Change Theme</button>
  <div class="box">Hello CSS Variables</div>
</body>

:root {
  --bg-color: white;
  --text-color: black;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.box {
  padding: 20px;
  border: 2px solid var(--text-color);
}

function changeTheme() {
  document.documentElement.style.setProperty("--bg-color", "black");
  document.documentElement.style.setProperty("--text-color", "white");
}

👉 با کلیک روی دکمه، رنگ‌ها تغییر می‌کنن.

🔹 مثال ۲: تغییر سایز فونت

<p class="text">این متن تغییر سایز می‌دهد!</p>
<button onclick="increaseSize()">بزرگ‌تر</button>

:root {
  --font-size: 16px;
}

.text {
  font-size: var(--font-size);
}

function increaseSize() {
  document.documentElement.style.setProperty("--font-size", "24px");
}

👉 هر بار روی دکمه کلیک بشه، سایز فونت تغییر می‌کنه.

🔹 مثال ۳: خواندن مقدار متغیر

let bgColor = getComputedStyle(document.documentElement).getPropertyValue("--bg-color");
console.log(bgColor); // مقدار فعلی متغیر رو نشون میده

✅ خلاصه:

  • با setProperty متغیرها رو تغییر می‌دیم.

  • با getPropertyValue مقدار فعلی رو می‌گیریم.

  • این تکنیک برای تم‌بندی، انیمیشن‌های داینامیک، و شخصی‌سازی UI فوق‌العاده است.