حل مشكلة تبديل مظهر Disqus في Next.js

قد تكون مزامنة مظهر تعليقات Disqus مع زر تبديل المظهر في Next.js أصعب مما تتوقع. في هذا المقال، أستعرض سبب المشكلة وطريقة حلها، لتتمكن من تطبيق الحل دون التنقّل بين أدوات فحص المتصفح ونقاشات StackOverflow.

لماذا لا يعمل الوضع التلقائي كما نتوقع؟

يوفّر Disqus خيار Auto، أي المظهر التلقائي، الذي يُفترض أن يتبع ألوان موقعك. لكن المواقع التي تستخدم next-themes قد تعرض خلفيات غير متناسقة ونصوصًا يصعب قراءتها. ويعود ذلك إلى عاملين متداخلين:

1. تضيف مكتبة next-themes الخاصية style="color-scheme: dark;" إلى عنصر <html> افتراضيًا عند استخدام الوضع الداكن.
2. لا ينتقل Disqus إلى المظهر الفاتح إلا عندما يبلغ تباين لون النص المحسوب مع الأسود الخالص 50% على الأقل.

عندما تظل قيمة color-scheme المفروضة ثابتة على dark، لا يعيد Disqus فحص متغيرات CSS بعد تحديثها، ويستمر في الوضع الداكن حتى بعد انتقال واجهة موقعك إلى الوضع الفاتح.

كيف يختار Disqus مظهره؟

• إذا كان لون النص الموروث يقع بين #000000 و#787878، يفترض Disqus أن الموقع يستخدم المظهر الفاتح.
• أما قيم التباين الأخرى فتدفع مكوّن التعليقات إلى استخدام الوضع الداكن.
• يؤدي تثبيت color-scheme: dark إلى تجاوز خطوة اكتشاف المظهر بالكامل.

الخطوة الأولى: تعطيل إضافة color-scheme في next-themes

يوفّر مكوّن ThemeProvider في مكتبة next-themes خيارًا باسم enableColorScheme. اضبطه على false حتى لا يفرض عنصر HTML نظام ألوان يتجاوز آلية اكتشاف المظهر في Disqus.

import "@/styles/globals.css";
import { ThemeProvider } from "next-themes";
import type { AppProps } from "next/app";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider attribute="class" enableColorScheme={false}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

بعد إزالة هذا التنسيق المباشر، يستطيع Disqus قراءة لون النص الفعلي الذي يحدّده مظهر موقعك. وستظهر الألوان الصحيحة عند إعادة تحميل المقال.

الخطوة الثانية: إعادة عرض Disqus عند تغيير المظهر

يحلّ تعطيل التنسيق المباشر المشكلة عند إعادة تحميل الصفحة، لكن مكوّن التعليقات يظل غير مستجيب لتبديل المظهر أثناء التصفح، لأنه لا يُعاد عرضه. لفرض تحديثه، استخدم المظهر الحالي بوصفه قيمة key في React. بهذه الطريقة، يعيد React تركيب مكوّن Disqus كلما تغيّر المظهر.

"use client";

import { DiscussionEmbed } from "disqus-react";
import { useTheme } from "next-themes";

interface DisqusCommentsProps {
  url: string;
  slug: string;
  title: string;
}

export function DisqusComments({ url, slug, title }: DisqusCommentsProps) {
  const { theme } = useTheme();

  const disqusConfig = {
    url,
    identifier: slug,
    title,
  };

  return (
    <DiscussionEmbed
      key={theme}
      shortname="your-disqus-shortname"
      config={disqusConfig}
    />
  );
}

عندما تتغيّر قيمة key من light إلى dark أو العكس، يُزال مكوّن DiscussionEmbed ثم يُركّب من جديد. ونتيجة لذلك، يعيد قراءة التنسيقات المحسوبة ويستخدم نظام الألوان الجديد.

نقاط إضافية للتحقق قبل النشر

• تأكّد من اختيار Auto في لوحة إدارة Disqus، ضمن Settings → General → Color Scheme.
• تأكّد من أن زر تبديل المظهر يغيّر لون النص في عنصر body أو العنصر الجذري، وليس ألوان الخلفية فقط.
• إذا كنت تؤجّل تحميل التعليقات، فمرّر عنوان الصفحة الحالي وقيمة slug الصحيحة حتى يتمكّن Disqus من الاحتفاظ بسلسلة التعليقات المناسبة عند تبديل المظهر.

الخلاصة

يكفي ضبط enableColorScheme={false} وإعادة تركيب مكوّن التعليقات باستخدام key مرتبط بالمظهر للحفاظ على تزامن Disqus مع next-themes. يعود الفضل إلى لوسيا نازارو (Lucia Nazzaro) في توثيق هذا الحل. ويمكنك الرجوع إلى هذه الخطوات كلما دمجت مكوّنات خارجية في موقع Next.js يدعم تبديل المظهر.