لقد قمت بتنفيذه باستخدام postMessage. الرموز ومنطق التنفيذ الخاص بها كما يلي:
الكتلة البرمجية ① تضيف مستمع حدث في إطار Discourse المضمن والذي سيقوم بنشر رسالة إلى موقعي الإلكتروني الذي يحتوي على إطار Discourse المضمن بمجرد تحميل Discourse المضمن.
عندما يتلقى موقعي الإلكتروني رسالة من Discourse المضمن، سيقوم بإجراء تحقق، كما هو موضح في الكتلة البرمجية ②، وإذا نجح، يستدعي الدالة setIframeStyle لتعيين Discourse المضمن.
الدالة setIframeStyle، كما هو موضح في الكتلة البرمجية ③، تمرر وضع اللون، “داكن” أو “فاتح”، إلى الإطار عن طريق استدعاء postMessage. بالإضافة إلى ذلك، بمجرد تبديل الوضع الداكن، يمكن استدعاء الدالة للحفاظ على نفس وضع اللون لـ Discourse المضمن مع موقعي الإلكتروني.
الكتلة البرمجية ④ تسمح لـ Discourse المضمن بمعالجة رسالة وضع اللون المرسلة من موقعي الإلكتروني. هنا أقوم بتبديل وضع اللون عن طريق تبديل اسم الفئة إلى علامة الجسم.
بالإضافة إلى ذلك، تتم إضافة الكتلتين البرمجيتين ① و ④ من خلال صفحة مسؤول Discourse، كما يلي:
ويجب إضافة فئات CSS المخصصة كما يلي:
