إدارة الألوان والتخصيص

مقدمة إلى إدارة الألوان في SASS

إدارة الألوان الفعالة أمر بالغ الأهمية لإنشاء أنظمة تصميم متسقة وقابلة للصيانة ويمكن الوصول إليها. توفر SASS أدوات قوية لتعريف لوحات الألوان وتوليد الاختلافات وتنفيذ أنظمة التخصيص المعقدة. نظام الألوان المنظم جيداً يجعل CSS الخاص بك أسهل في الصيانة، ويضمن اتساق التصميم، ويبسط تنفيذ ميزات مثل الوضع الداكن.

فوائد إدارة الألوان المنهجية

• الاتساق: مصدر واحد للحقيقة لجميع الألوان
• سهولة الصيانة: تغيير نظام الألوان بالكامل عن طريق تحديث القيم الأساسية
• قابلية التوسع: سهولة إضافة ألوان أو اختلافات جديدة
• التخصيص: تنفيذ بسيط لأوضاع الإضاءة/الظلام أو سمات العلامة التجارية
• إمكانية الوصول: نهج منهجي لنسب التباين والامتثال لـ WCAG

تعريف لوحات الألوان بالمتغيرات

نهج متغير بسيط

ابدأ بمتغيرات ألوان أساسية لنظام التصميم الخاص بك:

// ألوان العلامة التجارية
$color-primary: #3498db;
$color-secondary: #2ecc71;
$color-accent: #e74c3c;

// ألوان محايدة
$color-white: #ffffff;
$color-black: #000000;
$color-gray-light: #ecf0f1;
$color-gray: #95a5a6;
$color-gray-dark: #34495e;

// ألوان دلالية
$color-success: #27ae60;
$color-warning: #f39c12;
$color-danger: #e74c3c;
$color-info: #3498db;

// ألوان النص
$color-text-primary: #2c3e50;
$color-text-secondary: #7f8c8d;
$color-text-muted: #bdc3c7;

// الاستخدام
.button-primary {
  background-color: $color-primary;
  color: $color-white;
}

نظام ألوان منظم مع الخرائط

استخدام الخرائط لإدارة الألوان بشكل أكثر تنظيماً ومرونة:

$colors: (
  // العلامة التجارية
  primary: #3498db,
  secondary: #2ecc71,
  accent: #9b59b6,

  // دلالي
  success: #27ae60,
  warning: #f39c12,
  danger: #e74c3c,
  info: #3498db,

  // محايد
  white: #ffffff,
  black: #000000,
  gray-100: #f8f9fa,
  gray-200: #e9ecef,
  gray-300: #dee2e6,
  gray-400: #ced4da,
  gray-500: #adb5bd,
  gray-600: #6c757d,
  gray-700: #495057,
  gray-800: #343a40,
  gray-900: #212529
);

// دالة جلب الألوان
@function color($name) {
  @if map-has-key($colors, $name) {
    @return map-get($colors, $name);
  }
  @warn "Color '#{$name}' not found in $colors map.";
  @return null;
}

// الاستخدام
.alert-success {
  background-color: color(success);
  color: color(white);
}

توليد مقاييس الألوان

استخدام دوال الألوان المدمجة

توفر SASS دوال لتوليد اختلافات أفتح وأغمق:

$primary: #3498db;

// Lighten - يجعل اللون أفتح
$primary-light: lighten($primary, 10%);    // أفتح بنسبة 10%
$primary-lighter: lighten($primary, 20%);  // أفتح بنسبة 20%

// Darken - يجعل اللون أغمق
$primary-dark: darken($primary, 10%);      // أغمق بنسبة 10%
$primary-darker: darken($primary, 20%);    // أغمق بنسبة 20%

// Saturate - زيادة كثافة اللون
$primary-saturated: saturate($primary, 20%);

// Desaturate - تقليل كثافة اللون
$primary-muted: desaturate($primary, 20%);

// Mix - مزج لونين
$purple: mix($primary, #e74c3c, 50%);      // مزج بنسبة 50%

// Adjust - ضبط خصائص محددة بدقة
$adjusted: adjust-color($primary,
  $red: 10,
  $green: -5,
  $lightness: 5%
);

إنشاء دوال الظل/الصبغة المنهجية

بناء دوال مخصصة لمقاييس ألوان متسقة:

// Tint: مزج اللون مع الأبيض
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

// Shade: مزج اللون مع الأسود
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

// توليد مقياس كامل
$primary: #3498db;

$primary-100: tint($primary, 80%);  // فاتح جداً
$primary-200: tint($primary, 60%);
$primary-300: tint($primary, 40%);
$primary-400: tint($primary, 20%);
$primary-500: $primary;             // الأساس
$primary-600: shade($primary, 20%);
$primary-700: shade($primary, 40%);
$primary-800: shade($primary, 60%);
$primary-900: shade($primary, 80%); // غامق جداً

// الاستخدام
.button {
  background: $primary-500;

  &:hover {
    background: $primary-600;
  }

  &:active {
    background: $primary-700;
  }
}

بناء نظام ألوان مع الخرائط

خرائط ألوان متداخلة

إنشاء نظام ألوان شامل مع اختلافات:

@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

// توليد مقياس الألوان من اللون الأساسي
@function generate-scale($base-color) {
  @return (
    50: tint($base-color, 90%),
    100: tint($base-color, 80%),
    200: tint($base-color, 60%),
    300: tint($base-color, 40%),
    400: tint($base-color, 20%),
    500: $base-color,
    600: shade($base-color, 20%),
    700: shade($base-color, 40%),
    800: shade($base-color, 60%),
    900: shade($base-color, 80%)
  );
}

// لوحة الألوان مع المقاييس
$color-system: (
  primary: generate-scale(#3498db),
  secondary: generate-scale(#2ecc71),
  danger: generate-scale(#e74c3c),
  warning: generate-scale(#f39c12),
  gray: (
    50: #f8f9fa,
    100: #f1f3f5,
    200: #e9ecef,
    300: #dee2e6,
    400: #ced4da,
    500: #adb5bd,
    600: #6c757d,
    700: #495057,
    800: #343a40,
    900: #212529
  )
);

// دالة الجلب
@function color($palette, $shade: 500) {
  $color-palette: map-get($color-system, $palette);
  @if $color-palette {
    $color-value: map-get($color-palette, $shade);
    @if $color-value {
      @return $color-value;
    }
  }
  @warn "Color #{$palette}-#{$shade} not found.";
  @return null;
}

// الاستخدام
.button-primary {
  background: color(primary, 500);
  border-color: color(primary, 600);

  &:hover {
    background: color(primary, 600);
  }
}

.alert-danger {
  background: color(danger, 100);
  border-left: 4px solid color(danger, 500);
  color: color(danger, 900);
}

التباين وإمكانية الوصول

حساب نسبة التباين

التأكد من أن الألوان تلبي معايير إمكانية الوصول WCAG:

@use "sass:math";

// حساب الإضاءة النسبية
@function luminance($color) {
  $red: math.div(red($color), 255);
  $green: math.div(green($color), 255);
  $blue: math.div(blue($color), 255);

  $r: if($red <= 0.03928, math.div($red, 12.92), math.pow(math.div($red + 0.055, 1.055), 2.4));
  $g: if($green <= 0.03928, math.div($green, 12.92), math.pow(math.div($green + 0.055, 1.055), 2.4));
  $b: if($blue <= 0.03928, math.div($blue, 12.92), math.pow(math.div($blue + 0.055, 1.055), 2.4));

  @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
}

// حساب نسبة التباين
@function contrast-ratio($color1, $color2) {
  $l1: luminance($color1);
  $l2: luminance($color2);

  @if $l1 > $l2 {
    @return math.div($l1 + 0.05, $l2 + 0.05);
  } @else {
    @return math.div($l2 + 0.05, $l1 + 0.05);
  }
}

// اختيار لون نص متباين
@function contrasting-color($background, $light: white, $dark: black) {
  $light-contrast: contrast-ratio($background, $light);
  $dark-contrast: contrast-ratio($background, $dark);

  @if $light-contrast > $dark-contrast {
    @return $light;
  } @else {
    @return $dark;
  }
}

// الاستخدام
.button {
  $bg-color: #3498db;
  background-color: $bg-color;
  color: contrasting-color($bg-color);
}

تنفيذ الوضع الداكن

نهج خصائص CSS المخصصة

النهج الأكثر مرونة يستخدم خصائص CSS المخصصة:

// تعريف ألوان السمة
$themes: (
  light: (
    bg-primary: #ffffff,
    bg-secondary: #f8f9fa,
    text-primary: #212529,
    text-secondary: #6c757d,
    border: #dee2e6,
    primary: #3498db,
    success: #27ae60,
    danger: #e74c3c
  ),
  dark: (
    bg-primary: #1a1a1a,
    bg-secondary: #2d2d2d,
    text-primary: #e9ecef,
    text-secondary: #adb5bd,
    border: #495057,
    primary: #5dade2,
    success: #2ecc71,
    danger: #ec7063
  )
);

// توليد خصائص CSS المخصصة
:root {
  @each $name, $value in map-get($themes, light) {
    --color-#{$name}: #{$value};
  }
}

[data-theme="dark"] {
  @each $name, $value in map-get($themes, dark) {
    --color-#{$name}: #{$value};
  }
}

// الاستخدام مع متغيرات CSS
.card {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.button-primary {
  background: var(--color-primary);
  color: var(--color-bg-primary);
}

بديل: prefers-color-scheme

الاستجابة تلقائياً لتفضيلات النظام:

// الوضع الفاتح (افتراضي)
:root {
  --color-bg: #ffffff;
  --color-text: #212529;
  --color-primary: #3498db;
}

// الوضع الداكن عبر تفضيل النظام
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-text: #e9ecef;
    --color-primary: #5dade2;
  }
}

// السماح بالتجاوز اليدوي
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-text: #212529;
  --color-primary: #3498db;
}

[data-theme="dark"] {
  --color-bg: #1a1a1a;
  --color-text: #e9ecef;
  --color-primary: #5dade2;
}

بناء نظام سمة كامل

معمارية متعددة السمات

// تعريفات السمات
$themes: (
  default: (
    colors: (
      primary: #3498db,
      secondary: #2ecc71,
      background: #ffffff,
      surface: #f8f9fa,
      text: #212529,
      text-secondary: #6c757d
    ),
    spacing: (
      unit: 8px
    ),
    typography: (
      font-family: "Inter, sans-serif",
      font-size-base: 16px
    )
  ),
  dark: (
    colors: (
      primary: #5dade2,
      secondary: #58d68d,
      background: #1a1a1a,
      surface: #2d2d2d,
      text: #e9ecef,
      text-secondary: #adb5bd
    ),
    spacing: (
      unit: 8px
    ),
    typography: (
      font-family: "Inter, sans-serif",
      font-size-base: 16px
    )
  ),
  high-contrast: (
    colors: (
      primary: #0066cc,
      secondary: #00aa00,
      background: #000000,
      surface: #1a1a1a,
      text: #ffffff,
      text-secondary: #cccccc
    ),
    spacing: (
      unit: 8px
    ),
    typography: (
      font-family: "Arial, sans-serif",
      font-size-base: 18px
    )
  )
);

// mixin السمة
@mixin theme($theme-name) {
  $theme: map-get($themes, $theme-name);

  @if $theme {
    $colors: map-get($theme, colors);

    @each $name, $value in $colors {
      --color-#{$name}: #{$value};
    }

    $spacing: map-get($theme, spacing);
    @each $name, $value in $spacing {
      --spacing-#{$name}: #{$value};
    }

    $typography: map-get($theme, typography);
    @each $name, $value in $typography {
      --typography-#{$name}: #{$value};
    }
  }
}

// تطبيق السمات
:root {
  @include theme(default);
}

[data-theme="dark"] {
  @include theme(dark);
}

[data-theme="high-contrast"] {
  @include theme(high-contrast);
}

// استخدام المكون
.component {
  background: var(--color-surface);
  color: var(--color-text);
  padding: calc(var(--spacing-unit) * 2);
  font-family: var(--typography-font-family);
}

تنفيذ تبديل السمة

تكامل JavaScript

// JavaScript لتبديل السمة
const ThemeManager = {
  init() {
    // التحقق من التفضيل المحفوظ
    const savedTheme = localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');

    this.setTheme(savedTheme);

    // الاستماع لتغييرات تفضيل النظام
    window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', (e) => {
        if (!localStorage.getItem('theme')) {
          this.setTheme(e.matches ? 'dark' : 'light');
        }
      });
  },

  setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  },

  toggle() {
    const current = document.documentElement.getAttribute('data-theme');
    const next = current === 'dark' ? 'light' : 'dark';
    this.setTheme(next);
  }
};

// التهيئة
ThemeManager.init();

SASS لزر تبديل السمة

.theme-toggle {
  position: relative;
  width: 60px;
  height: 30px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;

  &::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    transition: transform 0.3s ease;
  }

  &:hover {
    border-color: var(--color-primary);
  }

  [data-theme="dark"] & {
    &::before {
      transform: translateX(30px);
    }
  }
}

أفضل الممارسات

إرشادات إدارة الألوان

• حدد لوحتك: استخدم 3-5 ألوان علامة تجارية بالإضافة إلى الألوان المحايدة
• أنشئ مقاييس منهجية: استخدم خطوات ظل/صبغة متسقة
• ضع إمكانية الوصول في الاعتبار: تأكد من نسب تباين كافية (WCAG AA: 4.5:1 للنص)
• استخدم أسماء دلالية: فضّل "primary" على "blue"، "danger" على "red"
• اختبر في السياق: تبدو الألوان مختلفة على خلفيات مختلفة
• وثّق نظامك: أنشئ دليل نمط الألوان
• استخدم متغيرات CSS للتخصيص: تمكّن من تبديل السمة في وقت التشغيل
• دعم الوضع الداكن: يتوقعه المستخدمون الحديثون

الملخص

في هذا الدرس، أتقنت:

• تعريف لوحات ألوان منظمة بالمتغيرات والخرائط
• توليد مقاييس الألوان باستخدام دوال الظل/الصبغة
• بناء أنظمة ألوان منهجية مع خرائط متداخلة
• حساب نسب التباين لإمكانية الوصول
• إنشاء دوال لون نص متباين
• تنفيذ الوضع الداكن بخصائص CSS المخصصة
• بناء أنظمة سمات متعددة مرنة
• تبديل السمة بسمات البيانات وJavaScript
• أفضل الممارسات لإدارة الألوان القابلة للصيانة

تحول إدارة الألوان الفعالة CSS الخاص بك من مجموعة من قيم الألوان التعسفية إلى لغة تصميم منهجية وقابلة للصيانة. من خلال الاستفادة من ميزات SASS القوية—الخرائط والدوال والـ mixins—مع خصائص CSS المخصصة الحديثة، يمكنك إنشاء أنظمة تخصيص متطورة صديقة للمطورين والمستخدمين. نظام الألوان المصمم جيداً هو أساس الواجهات المتسقة والتي يمكن الوصول إليها والجميلة.