Themes
Themes control the visual appearance of your documentation site.
Applying a Theme
import { defineDocs } from "@farming-labs/docs";
import { greentree } from "@farming-labs/theme/greentree";
export default defineDocs({
theme: greentree(),
});Cross-Framework Theme Parity
All built-in themes, including concrete, are available across Next.js, TanStack Start, SvelteKit, Astro, and Nuxt.
// Next.js / TanStack Start
import { concrete } from "@farming-labs/theme/concrete";
// SvelteKit
import { concrete as svelteConcrete } from "@farming-labs/svelte-theme/concrete";
// Astro
import { concrete as astroConcrete } from "@farming-labs/astro-theme/concrete";
// Nuxt
import { concrete as nuxtConcrete } from "@farming-labs/nuxt-theme/concrete";/* Next.js / TanStack Start */
@import "@farming-labs/theme/concrete/css";
/* SvelteKit */
@import "@farming-labs/svelte-theme/concrete/css";
/* Astro */
@import "@farming-labs/astro-theme/concrete/css";
/* Nuxt */
@import "@farming-labs/nuxt-theme/concrete/css";Theme Options
Each theme accepts an options object:
theme: greentree({
ui: {
colors: {
primary: "#0D9373",
background: "#FFFFFF",
foreground: "#1A1A1A",
},
radius: "0.5rem",
sidebar: { style: "default", width: 240 },
layout: { toc: { style: "default" } },
},
});Creating a Custom Theme
import { createTheme } from "@farming-labs/theme";
export const myTheme = createTheme({
name: "my-theme",
ui: {
colors: {
primary: "#6366F1",
background: "#0F0F10",
},
},
});Color Tokens
| Token | Description |
|---|---|
primary | Primary brand color |
background | Page background |
foreground | Main text color |
muted | Muted background |
mutedForeground | Muted text |
border | Border color |
accent | Accent/hover background |