متغيرات CSS

<style>
/* تعريف متغيرات عامة في :root */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --border-radius: 8px;
  --spacing: 16px;
  --font-size: 16px;
}
</style>

<style>
.button {
  background-color: var(--primary-color);
  color: white;
  border-radius: var(--border-radius);
  padding: var(--spacing);
  font-size: var(--font-size);
}

.card {
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);
  padding: var(--spacing);
}
</style>
<button class="button">زر</button>
<div class="card">بطاقة</div>

<style>
:root {
  --color: blue;
}
</style>
<div class="box-demo">صندوق عرض يوضح تأثير الخاصية الحالية</div>

<style>
.card {
  --card-bg: #f5f5f5;
  --card-padding: 20px;
}

.card-header {
  background: var(--card-bg);
  padding: var(--card-padding);
}
</style>
<div class="card">بطاقة</div>
<div class="card-header">ترويسة البطاقة</div>

<style>
:root {
  --theme-color: #333;
}

/* تجاوز المتغير في حاوية */
.dark-theme {
  --theme-color: #eee;
}

.dark-theme .content {
  color: var(--theme-color);  /* #eee */
}

.content {
  color: var(--theme-color);  /* #333 */
}
</style>
<div class="dark-theme">معاينة الوضع الداكن</div>
<div class="content">منطقة المحتوى الرئيسية</div>

<style>
.element {
  color: var(--undefined-color, red);  /* يستخدم الأحمر لأن --undefined-color غير مُعرَّف */
  background: var(--bg, var(--fallback, #eee));  /* يمكن تداخل القيم الاحتياطية */
}
</style>
<div class="element">هذا عنصر مثال</div>

// الحصول
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

// تعيين
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

<style>
/* سمة فاتحة (افتراضي) */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #f5f5f5;
  --border-color: #dddddd;
}

/* سمة داكنة */
[data-theme="dark"] {
  --bg-color: #1a1a2e;
  --text-color: #eeeeee;
  --card-bg: #16213e;
  --border-color: #0f3460;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
</style>

document.documentElement.setAttribute('data-theme', 'dark');
// أو
document.documentElement.setAttribute('data-theme', 'light');