مرجع للتخصيص الكامل للألوان

مطور
1

أود إنشاء اثنين من مخططات الألوان الخاصة بي حيث أختار جميع متغيرات الألوان (لا أحب القيم المحسوبة/المحولة).

هل هناك مرجع لهذا؟ ملف json المثال في هذا المنشور:

يحتوي فقط على عدد قليل من القيم المدرجة (يبدو أنها تلك التي يمكن تخصيصها افتراضيًا من خلال لوحة الإدارة). بينما تعرض بعض مخططات الألوان التي رأيتها مثل مخططات WCAG، عددًا قليلاً من المتغيرات الإضافية.

تحدث هذا المنشور عن إنشاء إضافة لتخصيص الألوان المتقدم: Customizing colors - #10 by awesomerobot

لكنني لا أعتقد أن هذا ضروري، إذا كان من الممكن فقط الحصول على ملف json مرجعي بجميع متغيرات الألوان المسماة التي يمكن تجاوزها، متجاوزًا القيم المحسوبة.

إعجاب واحد (1)
2

عند فحص مثيل discourse في متصفحك، يمكنك العثور على جميع أسماء المتغيرات الجذرية في علامة التبويب styles:

image
image394×1320 110 KB

ثم قم ببساطة بتعريف المتغيرات الإضافية في ملف json الخاص بك. على سبيل المثال:

{
  "about_url": null,
  "license_url": null,
  "name": "Full Color Schemes",
  "color_schemes": {
    "Colors Light": {
      "primary": "222",
      "secondary": "fff",
      "tertiary": "08c",
      "quaternary": "e45735",
      "header_background": "fff",
      "header_primary": "333",
      "highlight": "ffff4d",
      "danger": "c80001",
      "success": "090",
      "love": "fa6c8d",
      "primary-very-low": "f8f8f8",
      "primary-low": "e9e9e9",
      "primary-low-mid": "bdbdbd",
      "primary-medium": "919191",
      "primary-high": "646464",
      "primary-very-high": "434343",
      "secondary-low": "4d4d4d",
      "secondary-medium": "gray",
      "secondary-high": "a6a6a6",
      "secondary-very-high": "ededed"
    },
    "Colors Dark": {
      "primary": "ddd",
      "secondary": "222",
      "tertiary": "0f82af",
      "quaternary": "c14924",
      "header_background": "111",
      "header_primary": "ddd",
      "highlight": "a87137",
      "danger": "e45735",
      "success": "1ca551",
      "love": "fa6c8d",
      "primary-very-low": "282828",
      "primary-low": "313131",
      "primary-low-mid": "7a7a7a",
      "primary-medium": "909090",
      "primary-high": "a6a6a6",
      "primary-very-high": "c7c7c7",
      "secondary-low": "bdbdbd",
      "secondary-medium": "919191",
      "secondary-high": "646464",
      "secondary-very-high": "313131"
    }
  }
}

الشيء الجميل هو أن هذه المتغيرات ستظهر أيضًا في الواجهة الخلفية:

image
image1632×1747 210 KB

6 إعجابات
3

شكرًا لك — بعد نشر هذا، رأيت أنه تم إدراج كل شيء أيضًا في صفحة /styleguide > colors الخاصة بالمثيل — أفترض أن هذه هي القائمة الكاملة…

أتساءل الآن عن الاستخدام المختلف بين المتغيرات الوصفية (مثل primary-high) والمتغيرات المرقمة (مثل primary-800) وكيفية حساب ذلك عند إنشاء السمة الخاصة بي.

4

على حد علمي، إنها مجرد بعض الحسابات الإضافية الأكثر دقة التي يمكنك استخدامها في سمة أو مكون سمة. لكنها لا تُستخدم في جوهر Discourse.

إذا كنت ترغب في كتابة مخطط الألوان الخاص بك باستخدام القيم المرقمة فقط، يمكنك إعادة تعريف القيم الوصفية بهذه الطريقة في السمة الخاصة بك:

:root {
  --primary-high: var(--primary-800);
}

ولكن بعد ذلك، توجد فقط قيم مرقمة للأساسي والثلاثي.

إعجاب واحد (1)
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.