feat(docs): add dark theme mode

components/api-endpoint.tsx

@@ -187,7 +187,7 @@ export const ApiResponses: React.FC<{
  return (
  <>
  <Row>
- <h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">
+ <h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-mt-8 nx-text-2xl">
  Responses
  </h1>
  </Row>
@@ -245,7 +245,7 @@ export const ApiRequest: React.FC<{
  return (
  <>
  <Row>
- <h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">
+ <h1 className="nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90 nx-mt-8 nx-text-2xl">
  Request
  </h1>
  </Row>
@@ -390,23 +390,25 @@ export const ApiEndpointRequestResponse: React.FC<{
  <>
  <Row>
  <p className="nx-endpoint nx-text-base">
- <span className="nextra-content nx-font-medium">Endpoint: </span>
- <span className="nx-endpoint-method nx-text-fetch-main">
+ <span className="nextra-content nx-font-medium dark:nx-text-white-60">
+ Endpoint:
+ </span>
+ <span className="nx-endpoint-method nx-text-fetch-main dark:nx-text-white-90 dark:nx-bg-green-700">
  {properties.method}
- </span>{" "}
- <span className="nx-text-purple nx-font-normal">
+ </span>
+ <span className="nx-text-purple nx-font-normal dark:nx-text-indigo-250">
  {properties.path}
  </span>
  {isModalOpen ? (
  <button
- className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl"
+ className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl dark:nx-text-white dark:nx-bg-indigo-500"
  onClick={closeModal}
  >
  Cancel
  </button>
  ) : (
  <button
- className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl"
+ className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl dark:nx-text-white dark:nx-bg-indigo-500"
  onClick={openModal}
  >
  Run Code
@@ -416,33 +418,37 @@ export const ApiEndpointRequestResponse: React.FC<{
  </Row>
 
  {isModalOpen && (
- <div className="nx-bg-grey nx-px-6 nx-py-8 nx-rounded nx-mt-12">
- <div className="nx-bg-white nextra-content nx-py-2 nx-px-4 nx-rounded">
+ <div className="nx-bg-grey nx-px-6 nx-py-8 nx-rounded nx-mt-12 dark:nx-bg-dark-mode-white-2">
+ <div className="nx-bg-white nextra-content nx-py-2 nx-px-4 nx-rounded dark:nx-bg-dark-mode-white-5">
  Parameters
  </div>
 
  <div className="nx-flex nx-flex-col nx-text-sm">
  <div className="nx-flex nx-mt-4 nx-ml-4">
  <div className="nx-w-1/4">
- <p className="nextra-content nx-text-sm">Name</p>
+ <p className="nextra-content nx-text-sm dark:nx-text-white-60">
+ Name
+ </p>
  </div>
  <div className="nx-w-3/4">
- <p className="nextra-content nx-text-sm">Description</p>
+ <p className="nextra-content nx-text-sm dark:nx-text-white-60">
+ Description
+ </p>
  </div>
  </div>
  <div className="nx-mt-2 nx-mb-4 nx-border-t nx-border-gray-300" />
  {isBearerTokenRequired && (
  <div className="md:nx-flex nx-block nx-items-center nx-ml-4">
  <div className="nx-flex nx-gap-2 nx-w-1/4">
- <p className="nextra-content nx-text-sm">
+ <p className="nextra-content nx-text-sm dark:nx-text-white-60">
  Bearer Token required
  </p>
  <Tooltip>
- <p className="nx-text-sm nx-font-bold nx-text-gray-800 nx-pb-1">
+ <p className="nx-text-sm nx-font-bold nx-text-gray-800 dark:nx-text-white-90 nx-pb-1">
  To access your Agentverse API key, please follow these
  steps:
  </p>
- <ol className="nx-text-xs nx-leading-4 nx-text-gray-600 nx-pb-3 nx-list-decimal nx-mt-2 nx-p-[10px]">
+ <ol className="nx-text-xs nx-leading-4 nx-text-gray-600 dark:nx-text-white-60 nx-pb-3 nx-list-decimal nx-mt-2 nx-p-[10px]">
  <li>
  Log in to your{" "}
  <Link
@@ -476,7 +482,7 @@ export const ApiEndpointRequestResponse: React.FC<{
  placeholder="Bearer Token"
  value={bearerToken}
  onChange={(e) => setBearerToken(e.target.value)}
- className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nx-mt-2 nx-w-full"
+ className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nx-mt-2 nx-w-full dark:nx-bg-dark-mode-white-10 dark:nx-border-none"
  />
  </div>
  </div>
@@ -501,7 +507,7 @@ export const ApiEndpointRequestResponse: React.FC<{
  updatedPathParameters[paramName] = e.target.value;
  setPathParameters(updatedPathParameters);
  }}
- className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nx-mt-2 nx-w-full"
+ className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nx-mt-2 nx-w-full dark:nx-bg-dark-mode-white-10 dark:nx-border-none"
  />
  </div>
  </div>
@@ -519,7 +525,8 @@ export const ApiEndpointRequestResponse: React.FC<{
  <textarea
  value={requestPayload}
  onChange={(e) => setRequestPayload(e.target.value)}
- className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nextra-content nx-mt-2 nx-h-24 nx-w-full"
+ style={{ resize: "none" }}
+ className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nextra-content nx-mt-2 nx-h-24 nx-w-full dark:nx-bg-dark-mode-white-10 dark:nx-border-none"
  />
  </div>
  </div>
@@ -546,23 +553,25 @@ export const ApiEndpointRequestResponse: React.FC<{
  {/* Display Actual Response */}
  {actualResponse && (
  <div className="nx-mt-6">
- <div className="nx-bg-white nextra-content nx-text-base nx-py-2 nx-px-4 nx-rounded">
+ <div className="nx-bg-white nextra-content nx-text-base nx-py-2 nx-px-4 nx-rounded dark:nx-bg-dark-mode-white-5">
  Actual Response
  </div>
- <div className="nx-bg-white nx-rounded nx-p-2 nx-mt-4">
- <pre className="nx-whitespace-pre-wrap">{actualResponse}</pre>
+ <div className="nx-bg-white nx-rounded nx-p-2 nx-mt-4 dark:nx-bg-dark-mode-white-10">
+ <pre className="nx-whitespace-pre-wrap dark:nx-bg-dark-mode-white-10">
+ {actualResponse}
+ </pre>
  </div>
  </div>
  )}
 
  {/* Display Sample Response if Available */}
  {!actualResponse && properties.responses && (
  <div className="nx-mt-6">
- <div className="nx-bg-white nextra-content nx-text-base nx-py-2 nx-px-4 nx-rounded">
+ <div className="nx-bg-white nextra-content nx-text-base nx-py-2 nx-px-4 nx-rounded dark:nx-bg-dark-mode-white-5">
  Sample Response
  </div>
- <div className="nx-bg-white nx-rounded nx-p-2 nx-mt-4">
- <pre className="nx-whitespace-pre-wrap">
+ <div className="nx-bg-white nx-rounded nx-p-2 nx-mt-4 dark:nx-bg-dark-mode-white-5">
+ <pre className="nx-whitespace-pre-wrap dark:nx-bg-dark-mode-white-5">
  {JSON.stringify(properties.responses, null, 2)}
  </pre>
  </div>

components/code.tsx

@@ -152,7 +152,9 @@ export const Dropdown: React.FC<DropdownProps> = ({
  onClick={toggleDropdown}
  className="nx-relative nx-flex nx-items-center nx-gap-1 nx-cursor-pointer"
  >
- <span className="dropdown-text">{selectedOption || placeholder}</span>
+ <span className="dropdown-text dark:nx-text-white-80">
+ {selectedOption || placeholder}
+ </span>
  <DropDownArrow />
  </div>
  {isDropdownOpen && (
@@ -234,13 +236,13 @@ export const CodeBlock: React.FC<{
  viewBox="0 0 12 8"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
+ className="copy-icon"
  >
- <path
- d="M11.3359 0.414062C11.5469 0.648438 11.5469 1 11.3359 1.21094L5.14844 7.39844C4.91406 7.63281 4.5625 7.63281 4.35156 7.39844L1.16406 4.21094C0.929688 4 0.929688 3.64844 1.16406 3.4375C1.375 3.20312 1.72656 3.20312 1.9375 3.4375L4.72656 6.22656L10.5391 0.414062C10.75 0.203125 11.1016 0.203125 11.3125 0.414062H11.3359Z"
- fill="#0B1742"
- />
+ <path d="M11.3359 0.414062C11.5469 0.648438 11.5469 1 11.3359 1.21094L5.14844 7.39844C4.91406 7.63281 4.5625 7.63281 4.35156 7.39844L1.16406 4.21094C0.929688 4 0.929688 3.64844 1.16406 3.4375C1.375 3.20312 1.72656 3.20312 1.9375 3.4375L4.72656 6.22656L10.5391 0.414062C10.75 0.203125 11.1016 0.203125 11.3125 0.414062H11.3359Z" />
  </svg>
- <span className="nx-copy-text">Copied</span>
+ <span className="nx-copy-text dark:nx-text-white-80">
+ Copied
+ </span>
  </>
  ) : (
  <CopyIcon />
@@ -249,7 +251,7 @@ export const CodeBlock: React.FC<{
  )}
  </header>
  <span className="filename">{selectedLabel}</span>
- <div ref={codeRef} style={{ overflowX: "scroll", width: "100%" }}>
+ <div ref={codeRef} style={{ width: "100%" }}>
  {selectedCodeBlock?.component ?? "No code block selected"}
  </div>
  </div>
@@ -407,11 +409,13 @@ export const CustomPre: React.FC<CodeBoxProps> = ({
  xmlns="http://www.w3.org/2000/svg"
  >
  <path
+ className="copy-icon"
  d="M11.3359 0.414062C11.5469 0.648438 11.5469 1 11.3359 1.21094L5.14844 7.39844C4.91406 7.63281 4.5625 7.63281 4.35156 7.39844L1.16406 4.21094C0.929688 4 0.929688 3.64844 1.16406 3.4375C1.375 3.20312 1.72656 3.20312 1.9375 3.4375L4.72656 6.22656L10.5391 0.414062C10.75 0.203125 11.1016 0.203125 11.3125 0.414062H11.3359Z"
- fill="#0B1742"
  />
  </svg>
- <span className="nx-copy-text">Copied</span>
+ <span className="nx-copy-text dark:nx-text-white-80">
+ Copied
+ </span>
  </>
  ) : (
  <CopyIcon />
@@ -481,13 +485,13 @@ export const ModifiedPre = ({
  viewBox="0 0 12 8"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
+ className="copy-icon"
  >
- <path
- d="M11.3359 0.414062C11.5469 0.648438 11.5469 1 11.3359 1.21094L5.14844 7.39844C4.91406 7.63281 4.5625 7.63281 4.35156 7.39844L1.16406 4.21094C0.929688 4 0.929688 3.64844 1.16406 3.4375C1.375 3.20312 1.72656 3.20312 1.9375 3.4375L4.72656 6.22656L10.5391 0.414062C10.75 0.203125 11.1016 0.203125 11.3125 0.414062H11.3359Z"
- fill="#0B1742"
- />
+ <path d="M11.3359 0.414062C11.5469 0.648438 11.5469 1 11.3359 1.21094L5.14844 7.39844C4.91406 7.63281 4.5625 7.63281 4.35156 7.39844L1.16406 4.21094C0.929688 4 0.929688 3.64844 1.16406 3.4375C1.375 3.20312 1.72656 3.20312 1.9375 3.4375L4.72656 6.22656L10.5391 0.414062C10.75 0.203125 11.1016 0.203125 11.3125 0.414062H11.3359Z" />
  </svg>
- <span className="nx-copy-text">Copied</span>
+ <span className="nx-copy-text dark:nx-text-white-80">
+ Copied
+ </span>
  </>
  ) : (
  // <CopyIcon />

components/dark-logo.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Image from "next/image";
+import darkFetchLogo from "../src/svgs/dark-fetch-logo.svg";
+
+const DarkLogo: React.FC = () => {
+ return (
+ <div className="nx-flex nx-gap-3 nx-items-baseline">
+ <Image
+ width={214}
+ height={24}
+ src={darkFetchLogo}
+ className="hover:nx-opacity-75"
+ alt="fetch-logo"
+ />
+ </div>
+ );
+};
+
+export default DarkLogo;

components/examples-mdx.tsx

@@ -1,6 +1,8 @@
 import React, { useState, ChangeEvent } from "react";
 import { GuideBox } from "./feature-guide-tabs";
+import styles from "./footer.module.css";
 import { Grid2 } from "./mdx";
+import { SearchIcon } from "src/icons/shared-icons";
 
 interface Content {
  type: string;
@@ -33,12 +35,12 @@ const ExamplesMdx: React.FC<FilterMdxProps> = ({ content }) => {
  };
 
  return (
- <div className="nx-flex nx-flex-col nx-w-full nx-items-end nx-justify-end">
+ <div className="nx-flex nx-flex-col nx-w-full nx-py-6">
  <div className="md:nx-flex nx-block nx-gap-5">
  <select
  name="select"
  onChange={onSelectChange}
- className="nx-rounded-[10px] nx-outline-none nx-cursor-pointer nx-border nx-border-solid nx-px-3 nx-py-2"
+ className="nx-rounded-[10px] nx-outline-none nx-cursor-pointer nx-border nx-border-solid nx-bg-transparent nx-py-2 nx-px-4 dark:full-border-dark dark:nx-text-white-90"
  >
  <option value="">All Types</option>
  {content
@@ -50,13 +52,16 @@ const ExamplesMdx: React.FC<FilterMdxProps> = ({ content }) => {
  </option>
  ))}
  </select>
- <input
- name="input"
- value={inputVal}
- onChange={onInputChange}
- placeholder="Search...."
- className="nx-font-normal nx-mt-5 md:nx-mt-0 nx-bg-transparent nx-rounded-full nx-border nx-border-solid nx-border-purple nx-px-6 nx-py-2"
- />
+ <div className={styles.inputBox}>
+ <input
+ name="input"
+ value={inputVal}
+ onChange={onInputChange}
+ placeholder="Search...."
+ className={styles.inputInner}
+ />
+ <SearchIcon />
+ </div>
  </div>
  <Grid2>
  {content

components/feature-guide-tabs.tsx

@@ -28,10 +28,16 @@ export const GuideBox = ({
  }}
  id={content.title.toLowerCase().split(" ").join("-")}
  >
- <h3 className="nx-text-black nx-font-medium nx-mb-2 nx-text-lg">
+ <h3
+ className={`nx-text-black nx-font-medium nx-mb-2 nx-text-lg ${
+ hover ? "title-hover-dark" : " dark:nx-text-white-90"
+ }`}
+ >
  {content.title}
  </h3>
- <p className="nx-text-gray-500 nx-font-normal">{content.description}</p>
+ <p className="nx-text-gray-500 dark:nx-text-white-60 nx-font-normal">
+ {content.description}
+ </p>
  </section>
  );
 };

components/feedback.tsx

@@ -88,7 +88,7 @@ const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
  </p>
  ) : (
  <>
- <h3 className="nx-text-lg md:nx-mt-0 nx-mt-3 nx-flex nx-justify-center ">
+ <h3 className="nx-text-lg md:nx-mt-0 nx-mt-3 nx-flex nx-justify-center dark:nx-text-white-60">
  Was this page helpful?
  </h3>
  <div
@@ -126,7 +126,7 @@ const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
  {isInputVisible && (
  <div className="nx-mt-4 nx-flex nx-flex-col nx-w-full">
  <textarea
- className={`nx-rounded-lg nx-border nx-border-gray-300 nx-bg-gray-100 nx-p-4 nx-shadow-inner nx-max-w-532px nx-w-full nx-mx-auto nx-min-h-132px ${
+ className={`nx-rounded-lg nx-border nx-border-gray-300 nx-bg-gray-100 nx-p-4 nx-shadow-inner nx-max-w-532px nx-w-full dark:nx-outline-none dark:nx-bg-dark-mode-white-5 dark:nx-border-none nx-mx-auto nx-min-h-132px ${
  maliciousStringDetected ? "nx-border-red" : ""
  }`}
  placeholder="Enter your feedback..."
@@ -143,7 +143,7 @@ const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
  </p>
  )}
  <button
- className={`nx-mt-4 nx-bg-submit-feedback nx-text-white nx-font-bold nx-py-2 nx-px-4 nx-rounded-xxl nx-max-w-180px nx-mx-auto nx-w-full ${
+ className={`nx-mt-4 nx-bg-submit-feedback nx-text-sm nx-text-white  nx-font-medium nx-py-2 nx-px-4 nx-rounded-lg nx-max-w-180px nx-mx-auto nx-w-full ${
  maliciousStringDetected ? "nx-bg-gray-400" : ""
  }`}
  onClick={handleFeedbackSubmit}
@@ -153,7 +153,7 @@ const FeedbackComponent = ({ pageUrl }: { pageUrl: string }) => {
  </button>
  </div>
  )}
- <h3 className="md:nx-text-base nx-text-sm nx-flex nx-justify-center nx-mt-3">
+ <h3 className="md:nx-text-base nx-text-sm nx-flex nx-justify-center nx-mt-3 dark:nx-text-white-60">
  You can also leave detailed feedback
  <Link
  className="nx-text-primary-600 nx-ml-1 nx-underline nx-decoration-from-font [text-underline-position:from-font]"