Customization

Although we love the default (dark) theme of docsly elements, you might want to customize it according to your brand's design guidelines.

Finding docsly elements

Every customizable docsly element has a corresponding class in the appearance prop. To find the class of a docsly element, you can use the browser's inspect element feature. For example, in the following screenshot we're inspecting the docsly toolbox element and we can see that it has a class of docslyToolboxStyles.

To customize your docsly component, you can do follow one of approaches listed below:

Using TailwindCSS

docsly elements are built using TailwindCSS with a dy prefix to avoid name collisions. You can customize the appearance of the docsly elements by overriding the TailwindCSS classes. For example, to change the background color of the docsly toolbox element to orange, you can add the following appearance prop:

"use client";
import Docsly from "@docsly/react";
import "@docsly/react/styles.css";
import { usePathname } from "next/navigation";
 
export default function DocslyClient() {
  const pathname = usePathname();
  if (pathname.startsWith("/docs")) {
    return (
      <Docsly
        publicId={process.env.NEXT_PUBLIC_DOCSLY_PUBLIC_ID}
        pathname={pathname}
        appearance={{
          docslyToolboxStyles: "bg-orange-600 text-orange-50",
        }}
      />
    );
  }
  return null;
}

Customized docsly toolbox:

Using CSS Modules

You can also use CSS Modules to customize the appearance of the docsly elements. To do so, create a new docsly.module.css file and add the following styles:

.docslyToolboxStyles {
  background-color: orange;
  color: white;
}

Then inside your DocslyClient component, import the docsly.module.css file and pass the docslyToolboxStyles class to the appearance prop:

"use client";
import Docsly from "@docsly/react";
import "@docsly/react/styles.css";
import { usePathname } from "next/navigation";
import styles from "./docsly.module.css";
 
export default function DocslyClient() {
  const pathname = usePathname();
  if (pathname.startsWith("/docs")) {
    return (
      <Docsly
        publicId={process.env.NEXT_PUBLIC_DOCSLY_PUBLIC_ID}
        pathname={pathname}
        appearance={{
          docslyToolboxStyles: styles.docslyToolboxStyles,
        }}
      />
    );
  }
  return null;
}