المظهر وألوان الهوية

لون هوية واحد، ورموز للأزرار، ووصفات لـ shadcn/ui ولوحة التحكم الخاصة بك.

في هذه الصفحة

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

لون واحد

يقبل ui.brand أي لون CSS ويختار الأسود أو الأبيض لنص أزرار الهوية بحسب التباين. وتفعل السمة brand الشيء نفسه على <owe-editor>. وفي CSS العادي عيّن --owe-brand (و--owe-on-brand إذا لم يظهر الأبيض بوضوح) على .owe أو على غلاف أو على :root.

createEditor({ element, ui: { brand: "#e11d48" } });

الرموز المشتقة

كل ما عدا ذلك يُشتق من لون الهوية بـ color-mix(). وإذا عيّنت أيًّا منها بنفسك فقيمتك هي التي تُطبَّق.

الرموز المشتقة من لون الهوية
الرمز	طريقة الاشتقاق
`--owe-primary`	لون الهوية نفسه. للأزرار المضغوطة في الشريط وأزرار النوافذ الرئيسية.
`--owe-primary-hover`	اللون الرئيسي ممزوجًا بنسبة 15% نحو الأسود.
`--owe-accent`	لون الروابط والنص: لون الهوية ممزوجًا 30% نحو الأسود في الفاتح و40% نحو الأبيض في الداكن.
`--owe-focus, --owe-caret`	لون التمييز.
`--owe-selection`	لون الهوية بشفافية 22% في الفاتح و45% في الداكن.
`--owe-gradient`	من `--owe-brand` إلى `--owe-brand-2`. ويضبط `ui.brand` درجة أفتح لتكون اللون الثاني.

رموز الأزرار

تعيد هذه الرموز تنسيق الأزرار والشريط والبطاقة دون لمس أي محدِّد. عيّنها على .owe أو على أي عنصر يحيط به، مثل غلاف لوحة التحكم. وإن لم تعيّنها فتُستخدم القيمة الافتراضية الموضحة.

رموز الأزرار والشريط
الرمز	الافتراضي	ما تنسّقه
`--owe-btn-color`	`--owe-icon`	أيقونة زر الشريط ونصه.
`--owe-btn-bg`	`transparent`	خلفية زر الشريط.
`--owe-btn-hover-color, --owe-btn-hover-bg`	`--owe-text, --owe-surface-2`	الزر عند تمرير المؤشر.
`--owe-btn-active-color, --owe-btn-active-bg`	`--owe-on-accent, --owe-primary`	الزر المضغوط أو المفعَّل.
`--owe-btn-primary-bg, --owe-btn-primary-color`	`--owe-primary, --owe-on-accent`	الزر الرئيسي في النوافذ (إدراج، تطبيق).
`--owe-btn-radius`	`--owe-radius-sm`	زوايا الأزرار وعناصر القوائم.
`--owe-toolbar-bg, --owe-toolbar-border`	`--owe-chrome, --owe-border-subtle`	الشريط وشريط البحث وشريط الحالة.
`--owe-editor-border, --owe-editor-radius`	`--owe-border-subtle, --owe-radius`	حدّ البطاقة وزواياها.

شريط أدوات داكن فوق منطقة تحرير فاتحة، بزوايا أصغر:

CSS

.owe {
  --owe-toolbar-bg: #0f172a;
  --owe-toolbar-border: #0f172a;
  --owe-btn-color: #e2e8f0;
  --owe-btn-hover-bg: #1e293b;
  --owe-btn-hover-color: #ffffff;
  --owe-btn-radius: 6px;
  --owe-editor-radius: 8px;
}

طابِق لوحة التحكم

اجعل الرموز تشير إلى المتغيّرات التي يعرّفها نظام التصميم لديك، مثل shadcn/ui في المثال أدناه. فالمحرّر لا يعرّف أي رمز بنفسه، لذا تفوز قيمتك أينما عيّنتها، وتقرأ الرموز متغيّراتك عند استخدامها، فيتبع المحرّر سماتك الفاتحة والداكنة دون سكربت. وعيّن theme إلى dark أيضًا إذا كانت لوحتك داكنة، لتتوافق الروابط والتحديد وعناصر التحكم الأصلية.

CSS

/* shadcn/ui (Tailwind v4 variables) */
.owe {
  --owe-brand: var(--primary);
  --owe-brand-2: var(--primary);
  --owe-on-brand: var(--primary-foreground);
  --owe-bg: var(--card);
  --owe-text: var(--card-foreground);
  --owe-body: var(--card-foreground);
  --owe-chrome: var(--muted);
  --owe-surface: var(--popover);
  --owe-surface-2: var(--accent);
  --owe-field-bg: var(--background);
  --owe-muted: var(--muted-foreground);
  --owe-icon: var(--foreground);
  --owe-border-subtle: var(--border);
  --owe-popup-border: var(--border);
  /* input outlines need 3:1; shadcn's --border is lighter */
  --owe-border: color-mix(in oklab, var(--foreground) 45%, var(--card));
  --owe-radius: var(--radius);
  --owe-radius-sm: calc(var(--radius) - 2px);
  --owe-font: inherit;
}

تغيير المظهر لاحقًا

يتابع <owe-editor> تغيّر السمتين theme وbrand. أما مع createEditor() فاستدعِ setTheme() على واجهته. وهي تستبدل المظهر كله، فمرّر كل ما تريد الإبقاء عليه. وهذا ما تفعله منطقة التجربة على الصفحة الرئيسية.

TypeScript

import { getUI } from "open-wysiwyg-editor";

getUI(editor)?.setTheme({ theme: "dark", brand: "#e11d48", tokens: { radius: "8px" } });

افحص التباين

لا يستطيع المحرّر اختيار الألوان نيابةً عنك. يحافظ --owe-accent على تباين 4.5:1 مع الأبيض للألوان المعتادة، لكن اللون الباهت جدًّا يحتاج إلى --owe-accent صريح، وتحتاج الأزرار المضغوطة إلى تباين 3:1 مع الشريط.

عدّل هذه الصفحة على GitHub