آموزش کامل متغیرهای CSS (Custom Properties) | ساخت دارک مود و تم حرفه‌ای

:root {    --primary-color: #3498db;    --secondary-color: #2ecc71;    --danger-color: #e74c3c;    --text-color: #333;    --bg-color: #f5f5f5;  }  .button {    background-color: var(--primary-color);    color: white;    padding: 10px 20px;    border: none;    border-radius: 5px;  }  .button-danger {    background-color: var(--danger-color);  }  body {    background-color: var(--bg-color);    color: var(--text-color);  }

<button class="button">دکمه معمولی</button>  <button class="button button-danger">دکمه خطر</button>

:root {    --font-primary: 'Vazir', 'Segoe UI', Tahoma, sans-serif;    --font-size-base: 16px;    --font-size-lg: 1.25rem;    --font-size-sm: 0.875rem;    --font-weight-normal: 400;    --font-weight-bold: 700;    --line-height-normal: 1.5;  }  body {    font-family: var(--font-primary);    font-size: var(--font-size-base);    line-height: var(--line-height-normal);  }  h1 {    font-size: var(--font-size-lg);    font-weight: var(--font-weight-bold);  }  small {    font-size: var(--font-size-sm);  }

:root {    --spacing-xs: 4px;    --spacing-sm: 8px;    --spacing-md: 16px;    --spacing-lg: 24px;    --spacing-xl: 32px;    --spacing-xxl: 48px;  }  .card {    padding: var(--spacing-md);    margin-bottom: var(--spacing-lg);    gap: var(--spacing-sm);  }  .container {    padding: var(--spacing-xl);  }  .section {    margin-top: var(--spacing-xxl);  }

:root {    --radius-sm: 4px;    --radius-md: 8px;    --radius-lg: 12px;    --radius-xl: 16px;    --radius-round: 50%;    --radius-pill: 9999px;  }  .button {    border-radius: var(--radius-md);  }  .card {    border-radius: var(--radius-lg);  }  .avatar {    border-radius: var(--radius-round);  }  .badge {    border-radius: var(--radius-pill);  }

:root {    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);    --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);    --shadow-hover: 0 10px 20px rgba(0,0,0,0.2);  }  .card {    box-shadow: var(--shadow-md);    transition: box-shadow 0.3s;  }  .card:hover {    box-shadow: var(--shadow-hover);  }  .modal {    box-shadow: var(--shadow-xl);  }

:root {    --base-padding: 16px;    --double-padding: calc(var(--base-padding) * 2);    --half-padding: calc(var(--base-padding) / 2);    --header-height: 70px;    --content-min-height: calc(100vh - var(--header-height));  }  .container {    padding: var(--double-padding);  }  .small-box {    padding: var(--half-padding);  }  .main-content {    min-height: var(--content-min-height);  }

.button {    /* اگر --button-color تعریف نشده بود، از #3498db استفاده کن */    background-color: var(--button-color, #3498db);    color: var(--button-text, white);    padding: var(--button-padding, 12px 24px);  }

.card {    --card-bg: white;    --card-padding: 20px;    --card-border-radius: 10px;        background: var(--card-bg);    padding: var(--card-padding);    border-radius: var(--card-border-radius);  }  .card.dark {    --card-bg: #2c3e50;    --card-padding: 15px;  }  /* متغیرهای بالا فقط داخل .card کار می‌کنند */

/* تم لایت (پیش‌فرض) */  :root {    --bg-primary: #ffffff;    --bg-secondary: #f5f5f5;    --text-primary: #333333;    --text-secondary: #666666;    --border-color: #e0e0e0;    --primary-color: #3498db;    --primary-hover: #2980b9;    --card-bg: #ffffff;    --shadow: 0 2px 10px rgba(0,0,0,0.1);    --transition: all 0.3s ease;  }     /* تم دارک */  [data-theme="dark"] {    --bg-primary: #1a1a2e;    --bg-secondary: #16213e;    --text-primary: #eeeeee;    --text-secondary: #bbbbbb;    --border-color: #2c3e50;    --primary-color: #e94560;    --primary-hover: #c62a47;    --card-bg: #0f3460;    --shadow: 0 2px 10px rgba(0,0,0,0.3);  }     /* اعمال متغیرها به المان‌ها */  body {    background-color: var(--bg-primary);    color: var(--text-primary);    transition: var(--transition);  }     .card {    background-color: var(--card-bg);    border: 1px solid var(--border-color);    box-shadow: var(--shadow);    transition: var(--transition);  }     button {    background-color: var(--primary-color);    color: white;    transition: var(--transition);  }  button:hover {    background-color: var(--primary-hover);  }

/* همان متغیرهای مثال بالا */  .theme-toggle {    background: var(--primary-color);    border: none;    padding: 10px 20px;    border-radius: 8px;    cursor: pointer;    color: white;  }

// جاوااسکریپت تغییر تم  const toggleTheme = () => {    const currentTheme = document.documentElement.getAttribute('data-theme');    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';    document.documentElement.setAttribute('data-theme', newTheme);    localStorage.setItem('theme', newTheme);  };     // بارگذاری تم ذخیره شده  const savedTheme = localStorage.getItem('theme');  if (savedTheme) {    document.documentElement.setAttribute('data-theme', savedTheme);  }     // اتصال به دکمه  document.querySelector('.theme-toggle')?.addEventListener('click', toggleTheme);

<button class="theme-toggle">🌙 تغییر تم</button>

/* تم لایت (پیش‌فرض) */  :root {    --primary: #3498db;    --bg: white;    --text: #333;  }     /* تم دارک */  [data-theme="dark"] {    --primary: #e94560;    --bg: #1a1a2e;    --text: #eee;  }     /* تم آبی */  [data-theme="blue"] {    --primary: #2980b9;    --bg: #e8f4f8;    --text: #2c3e50;  }     /* تم سبز */  [data-theme="green"] {    --primary: #27ae60;    --bg: #e8f8f5;    --text: #1e8449;  }     body {    background: var(--bg);    color: var(--text);  }  button {    background: var(--primary);  }

// تغییر به تم خاص  function setTheme(themeName) {    document.documentElement.setAttribute('data-theme', themeName);    localStorage.setItem('theme', themeName);  }

:root {    --main-color: #3498db;    --font-size: 16px;  }

// تغییر رنگ اصلی  document.documentElement.style.setProperty('--main-color', '#e74c3c');     // افزایش فونت  const currentSize = parseInt(getComputedStyle(document.documentElement)    .getPropertyValue('--font-size'));  document.documentElement.style.setProperty('--font-size', (currentSize + 2) + 'px');     // خواندن مقدار متغیر  const color = getComputedStyle(document.documentElement)    .getPropertyValue('--main-color');  console.log(color); // #3498db

.button {    /* اول --primary-color، اگر نبود #3498db، اگر اونم نبود blue */    background: var(--primary-color, var(--fallback-blue, blue));    padding: var(--button-padding, 12px 24px);    border-radius: var(--button-radius, 8px);  }

:root {    --container-padding: 20px;    --font-size-base: 14px;  }     @media (min-width: 768px) {    :root {      --container-padding: 40px;      --font-size-base: 16px;    }  }     @media (min-width: 1200px) {    :root {      --container-padding: 60px;      --font-size-base: 18px;    }  }     .container {    padding: var(--container-padding);  }  body {    font-size: var(--font-size-base);  }

:root {    /* رنگ‌ها */    --color-primary: #6366f1;    --color-primary-dark: #4f46e5;    --color-secondary: #8b5cf6;    --color-success: #10b981;    --color-danger: #ef4444;    --color-warning: #f59e0b;    --color-info: #3b82f6;        /* سطوح خاکستری */    --gray-100: #f3f4f6;    --gray-200: #e5e7eb;    --gray-300: #d1d5db;    --gray-400: #9ca3af;    --gray-500: #6b7280;    --gray-600: #4b5563;    --gray-700: #374151;    --gray-800: #1f2937;    --gray-900: #111827;        /* فاصله‌ها */    --space-1: 0.25rem;    --space-2: 0.5rem;    --space-3: 0.75rem;    --space-4: 1rem;    --space-5: 1.25rem;    --space-6: 1.5rem;    --space-8: 2rem;    --space-10: 2.5rem;    --space-12: 3rem;        /* فونت */    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;    --font-serif: 'Merriweather', Georgia, serif;    --font-mono: 'Fira Code', monospace;        /* سایه */    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);    --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);  }

:root {    --animation-speed: 0.3s;    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);  }  .button {    transition: all var(--animation-speed) var(--animation-easing);  }  .modal {    animation: fadeIn var(--animation-speed) ease;  }  @keyframes fadeIn {    from { opacity: 0; transform: scale(0.95); }    to { opacity: 1; transform: scale(1); }  }