الألوان واللوجو والمكان

مرّر object اسمه theme. primary بيلوّن زرار الفتح والـ header والـ active states، وonPrimary هو لون النص والأيقونات فوقه. كل الـ keys اختيارية.

init({
  theme: {
    primary: "#7c3aed",   // launcher, header, active states
    onPrimary: "#ffffff", // text and icons on top of primary
    background: "#ffffff",
    surface: "#f5f3ff",   // footer, segmented controls, hover states
    text: "#1f2937",
    mutedText: "#4b5563",
    border: "#c4b5fd",
    radius: 16,           // number (px) or any CSS length
    fontFamily: "Cairo, Tahoma, sans-serif",
  },
});

لما CMS أو tag manager هو اللي بيضيف الـ widget، اعمله theme من الـ CSS. الـ variables بتتحط على .a11yw-widget، و--a11yw-hl على :root بيحدد لون الإطار بتاع تعديلات الإبراز (highlight).

.a11yw-widget {
  --a11yw-primary: #7c3aed;
  --a11yw-on-primary: #ffffff;
  --a11yw-radius: 16px;
}
:root {
  --a11yw-hl: #d64000; /* outline color of "highlight headings / links / hover" */
}

هيظهرلك warning في الـ console لو الـ theme بتاعك خلّى جزء من الـ widget يفشل في تباين WCAG. الفحص بيشمل الألوان الـ hex بس.

• onPrimary فوق primary: ‎4.5:1.
• primary كإطار للـ focus فوق background: ‎3:1.
• text وmutedText فوق background، ولينكات الـ footer فوق surface: ‎4.5:1.

icon بيبدّل أيقونة زرار الفتح، وlogo بيضيف لوجو جنب عنوان اللوحة. الاتنين بيقبلوا URL لصورة أو DOM element. ماتمرّرش غير elements إنت واثق فيها: لأنها بتتنسخ زي ما هي.

init({
  icon: "/logo.svg",       // launcher: an image URL (svg, png, data: URI) or a DOM element
  logo: "/logo-white.svg", // next to the panel title (hidden by default)
});

زرار الفتح بيقعد في ركن من الركنين اللي تحت. لما الـ focus بالكيبورد يوصل لعنصر في الصفحة تحته، بيتنحّى على جنب لحد ما الـ focus يتحرك (WCAG 2.4.11)، بس بيفضل مغطّي الركن ده لمستخدمي الماوس واللمس: سيبه فاضي، أو زوّد padding تحت في صفحتك، أو حرّك الزرار بـ offset.

init({
  position: "left",        // "left" (default) or "right"
  offset: { x: 20, y: 90 }, // px from the screen edges, 0–1000
  buttonSize: 64,          // launcher diameter, 24–160 px
  zIndex: 9999,
});