هل يدعم الوضع المظلم التلقائي للتعليقات المضمنة أيضاً؟

ساهم ميزة
19

يمكنني التأكيد على أن الطريقة المذكورة أعلاه لا تزال تعمل، ولكن كان من الجيد عدم الاضطرار إلى كتابة التعليمات البرمجية من لقطة شاشة :slight_smile: لذا، إليك هي، محدثة قليلاً:

الخطوات

  1. ينتهي عرض إطار iframe الخاص بالتعليقات ويُرسل رسالة إلى نافذة المتصفح الرئيسية، لإعلامها بذلك.
  2. يستعلم المتصفح عن إعداد الوضع الداكن/الفاتح ويرسل القيمة مرة أخرى إلى إطار iframe.
  3. يستقبل إطار iframe الرسالة، ويضبط سمة بيانات (data-attribute) أو فئة (class) أو ما شابه، بناءً على إعداد الوضع الداكن/الفاتح.

التعليمات البرمجية

  1. بمجرد تحميل إطار iframe، أرسل إشعارًا إلى النافذة الأصلية. يجب إدخال هذا على Discourse، ضمن Admin -> Customize -> (select theme) -> Edit CSS/HTML -> Embedded Header.

    window.addEventListener("load", (event) => {
        window.parent.postMessage("iframe loaded", "*");
    }, false);
  1. تعامل مع هذا المشغل الوارد في النافذة الرئيسية. تعيش هذه التعليمات البرمجية في موقع مدونتك:

  const discourse_url = "https://your.discourse-instance.org";

  // هنا، نحدد السمة، ونرسل رسالة إلى إطار iframe لإعلامه بالسمة
  // انظر أدناه لكيفية ربط notifyFrameStyle
  const notifyIFrameOfTheme = () => {
    const iframe = document.getElementById("discourse-embed-frame");
    if (iframe && iframe.contentWindow) {
      iframe.contentWindow.postMessage(
        {
          // قم بتعديل السطر أدناه للحصول على إعداد الوضع المظلم، اعتمادًا على كيفية تخزينه
          theme: document.documentElement.getAttribute("data-theme")
        },
        discourse_url
      );
    }
  };

  // استدعاء setFrameStyle عند تلقي رسالة "iframe loaded"
  const handleMessageListener = (event) => {
    var origin = event.origin;
    if ((origin === discourse_url) && (event.data == "iframe loaded")) {
      notifyIFrameOfTheme();
    }
  };
  1. في كتلة script من (1)، أضف مستمعًا لرسالة السمة التي أرسلتها notifyFrameStyle:
    window.addEventListener("message", (event) => {
        const payload = event.data;
        if (payload.theme) {
          // افعل شيئًا بإعداد السمة؛ لقد قمت بتعيين السمة `data-theme` على `html` الخاص بإطار iframe،
          // ولكن قد ترغب في تعيين سمة فئة أو ما شابه
          document.documentElement.setAttribute("data-theme", payload.theme);
        }
    }, false);

التصميم

ضمن Admin -> Customize -> (select theme) -> Edit CSS/HTML -> Embedded CSS، يمكنك الآن توفير CSS لكل وضع. على سبيل المثال، يمكنك تجاوز متغيرات تصميم Discourse:

html[data-theme="dark"] {
  --primary: #ced6dd;
  --primary-low: #48566b;
  --secondary: #14181e;
  --tertiary: #2b7e8d;
}

آمل أن يساعد هذا!

6 إعجابات