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:
We recommend only customizing the background-color
, color
, border-color
, and opacity
of the docsly elements to keep the design consistent.
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;
}