Flows / Dark Mode

Dark Mode

Toggle the widget theme at runtime. The widget re-renders immediately when hasDarkBackground changes.

Active · light

app/dark-mode/page.tsx

'use client';

import { useState } from 'react';
import { FastComments } from 'fastcomments-nextjs';

export default function DarkModePage() {
  const [isDark, setIsDark] = useState(false);
  return (
    <>
      <button onClick={() => setIsDark(false)}>Light</button>
      <button onClick={() => setIsDark(true)}>Dark</button>
      <FastComments
        key={isDark ? 'd' : 'l'}
        tenantId="demo"
        urlId="nextjs-demo-dark"
        hasDarkBackground={isDark}
      />
    </>
  );
}