How to set up custom themes?

[Spyware007]

Can someone please tell me how to set up a custom theme in NextJs app?
I'm trying from a lot of time but its not working!

"use client";
import React from "react";
import Giscus from "@giscus/react";
import { useEffect } from "react";

export default function GiscusComp() {
  useEffect(() => {
    console.log("GiscusComp");
    console.log(document.body);
  }, []);
  return (
    <>
      <div className="flex items-center justify-center w-[80%] h-full">
        <Giscus
          id="comments"
          repo="onkar2921/test"
          repoId="R_kgDOKmnttQ"
          category="Announcements"
          categoryId="DIC_kwDOKmnttc4CaiIZ"
          mapping="pathname"
          term="Welcome to @giscus/react component!"
          reactionsEnabled="1"
          emitMetadata="0"
          inputPosition="bottom"
          theme="http://localhost:3000/comments.css"
          lang="en"
          loading="lazy"
        />
      </div>
    </>
  );
}

comments.css file is present in the public folder.

Please help and tell me what I am doing wrong?

[c2tz]

hello, sorry for the late reply. surely you've found it by now? i don't know nextjs. but having had some trouble setting up a custom theme. i'd like to help a little.

did you create a giscus.json file at the root of your repo (that for CORS)? with this in it:

{
    "origins": [
      "https://example.com"
    ],
    "originsRegex": [
      "http://localhost:[0-9]+"
    ]
  }

do you also have errors in the console ?
for my part, I point the css directly to an existing site on the web and not locally.
locally I have trouble getting it to work, so I modify it in my develop branch and then I use the staging.example.com site to see the modifications.