Skip to main content

CCLEE Docusaurus Theme

Live Demo · 中文

Out of the Box

Based on Docusaurus 3.x with integrated purple theme, dark mode, and Tailwind CSS. Clone and configure to get started.

Features​

Purple Theme + Dark Mode​

CSS variable-based color system:

  • Light mode: #4C1D95 as primary
  • Dark mode: #8B5CF6 as primary, WCAG AA compliant (≥4.5:1 contrast)

Tailwind CSS Integration​

Docusaurus doesn't support Tailwind natively. This theme provides integration:

npm install tailwindcss postcss autoprefixer @tailwindcss/typography

Add to src/css/custom.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Custom MDX Components​

Globally registered — use directly in any .md/.mdx file without imports:

ComponentPurpose
FeatureCardFeature card
InfoBoxInfo/warning/success callouts
ComparisonTableFeature comparison tables
StepBoxStep containers

SEO Automation​

plugins/plugin-json-ld.js handles structured data automatically:

  • Frontmatter schema: Article | HowTo | FAQPage maps to Schema.org types
  • Automatic hreflang tags

Internationalization​

Dual-language routing out of the box:

npm run start          # Chinese site
SITE=ai npm run start  # English site

Tech Stack​

TechnologyVersion
Docusaurus3.9+
React18.3+
Tailwind CSS3.4+
TypeScript5.7+
Node.js≥20.0

Quick Start​

Option 1: Fork the Project​

git clone https://github.com/cclee-hub/docs-site
cd docs-site
npm install
npm run start

Option 2: Integrate into Existing Project​

src/css/custom.css          → your-project/src/css/
src/theme/MDXComponents.tsx → your-project/src/theme/
tailwind.config.js          → your-project root/
npm install tailwindcss postcss autoprefixer @tailwindcss/typography

Configure Theme Colors​

Edit CSS variables in src/css/custom.css:

:root {
  --ifm-color-primary: #4C1D95;
}
[data-theme='dark'] {
  --ifm-color-primary: #8B5CF6;
}

Project Structure​

docs-site/
├── docs/                    # Chinese docs
├── i18n/en/                 # English translations
├── src/
│   ├── components/          # React components
│   ├── css/custom.css       # Tailwind + styles
│   └── theme/               # Theme overrides
├── plugins/
│   └── plugin-json-ld.js    # SEO plugin
└── tailwind.config.js       # Tailwind config

Next Steps​

Open Source & Free

MIT license. Free for personal and commercial use.

Changelog​

DateUpdate
2026-04-29Initial release of CCLEE Docusaurus Theme documentation
View full update history
  • 2026-04-29 — Initial release