Flows / Dark Mode

Dark Mode

Toggle the widget theme at runtime. The widget re-renders immediately whenhasDarkBackgroundchanges.

Active · light

dark-mode.tsx

import { useState } from 'react';
import { FastCommentsCommentWidget } from 'fastcomments-react';

export default function DarkMode() {
  const [isDark, setIsDark] = useState(false);
  return (
    <>
      <button onClick={() => setIsDark(false)}>Light</button>
      <button onClick={() => setIsDark(true)}>Dark</button>
      <FastCommentsCommentWidget
        tenantId="demo"
        urlId="gatsby-demo-dark"
        hasDarkBackground={isDark}
      />
    </>
  );
}