The core plugin functionality that configures Docusaurus with the classic theme components, styling, and build-time processing.
The default export that creates and configures the classic theme plugin.
/**
* Main theme plugin function that configures the classic theme
* @param context - Docusaurus load context containing site configuration
* @param options - Theme plugin options
* @returns Configured Docusaurus plugin
*/
export default function themeClassic(
context: LoadContext,
options: PluginOptions,
): Plugin<undefined>;Usage Example:
// docusaurus.config.js
export default {
title: 'My Site',
themes: [
[
'@docusaurus/theme-classic',
{
customCss: ['./src/css/custom.css'],
},
],
],
};Validates and normalizes plugin options before configuration.
/**
* Validates plugin options
* @param params - Validation parameters
* @returns Validated plugin options
*/
function validateOptions(params: {
options: Options;
validate: ValidationContext;
}): PluginOptions;
interface Options {
customCss?: string[] | string;
}
interface PluginOptions {
customCss: string[];
}Validates theme configuration options in themeConfig.
/**
* Validates theme configuration
* @param params - Validation parameters including theme config
* @returns Validated theme configuration
*/
function validateThemeConfig(params: {
themeConfig: ThemeConfig;
validate: ValidationContext;
}): ThemeConfig;Provides configuration for component swizzling (customization).
/**
* Returns swizzle configuration for component customization
* @returns Swizzle configuration object
*/
function getSwizzleConfig(): SwizzleConfig;
interface SwizzleConfig {
components: {
[componentName: string]: {
actions: {
eject: 'safe' | 'unsafe' | 'forbidden';
wrap: 'safe' | 'unsafe' | 'forbidden';
};
description: string;
};
};
}The plugin object returned by themeClassic includes several key methods:
/**
* Returns the path to compiled theme components
*/
getThemePath(): string; // Returns '../lib/theme'
/**
* Returns the path to TypeScript theme source
*/
getTypeScriptThemePath(): string; // Returns '../src/theme'/**
* Gets translation file configurations
*/
getTranslationFiles(): TranslationFileObject[];
/**
* Translates theme configuration based on current locale
*/
translateThemeConfig(params: {
themeConfig: ThemeConfig;
translationFiles: TranslationFile[];
}): ThemeConfig;
/**
* Gets default code translation messages
*/
getDefaultCodeTranslationMessages(): Record<string, string>;/**
* Returns client-side modules to be loaded
* Includes Infima CSS, Prism languages, and custom CSS
*/
getClientModules(): string[];/**
* Configures Webpack for Prism language support
*/
configureWebpack(
config: Configuration,
isServer: boolean,
utils: ConfigureWebpackUtils,
): Configuration | void;
/**
* Configures PostCSS with RTL support
*/
configurePostCss(postCssOptions: PostCssOptions): PostCssOptions;/**
* Injects HTML tags including theme scripts and SVG sprites
*/
injectHtmlTags(): {
preBodyTags: HtmlTag[];
};interface ThemeConfig {
colorMode?: {
defaultMode: 'light' | 'dark';
disableSwitch: boolean;
respectPrefersColorScheme: boolean;
};
navbar?: {
title?: string;
logo?: NavbarLogo;
items: NavbarItem[];
hideOnScroll?: boolean;
style?: 'primary' | 'dark';
};
footer?: {
style: 'light' | 'dark';
links?: FooterLinks;
copyright?: string;
logo?: FooterLogo;
};
prism?: {
theme?: PrismTheme;
darkTheme?: PrismTheme;
additionalLanguages?: string[];
defaultLanguage?: string;
magicComments?: MagicCommentConfig[];
};
docs?: {
versionPersistence: 'localStorage' | 'none';
sidebar: {
hideable: boolean;
autoCollapseCategories: boolean;
};
};
blog?: {
sidebar: {
groupByYear: boolean;
};
};
announcementBar?: {
id: string;
content: string;
backgroundColor?: string;
textColor?: string;
isCloseable?: boolean;
};
}interface NavbarLogo {
alt?: string;
src: string;
srcDark?: string;
href?: string;
target?: string;
width?: string | number;
height?: string | number;
className?: string;
style?: React.CSSProperties;
}
type NavbarItem =
| DefaultNavbarItem
| DropdownNavbarItem
| DocNavbarItem
| DocSidebarNavbarItem
| DocsVersionNavbarItem
| DocsVersionDropdownNavbarItem
| LocaleDropdownNavbarItem
| SearchNavbarItem
| HtmlNavbarItem;
interface DefaultNavbarItem {
type?: 'default';
label?: string;
html?: string;
to?: string;
href?: string;
activeBasePath?: string;
activeBaseRegex?: string;
exact?: boolean;
position?: 'left' | 'right';
className?: string;
prependBaseUrlToHref?: boolean;
}interface FooterLogo {
alt?: string;
src: string;
srcDark?: string;
href?: string;
width?: string | number;
height?: string | number;
}
type FooterLinks = MultiColumnFooter | SimpleFooter;
interface MultiColumnFooter {
links: FooterLinkColumn[];
}
interface SimpleFooter {
links: FooterLinkItem[];
}
interface FooterLinkColumn {
title?: string;
items: FooterLinkItem[];
}
interface FooterLinkItem {
label?: string;
html?: string;
to?: string;
href?: string;
prependBaseUrlToHref?: boolean;
}interface PrismTheme {
plain: PrismThemeEntry;
styles: PrismThemeEntry[];
}
interface PrismThemeEntry {
types: string[];
style: React.CSSProperties;
languages?: string[];
}
interface MagicCommentConfig {
className: string;
line?: string;
block?: {
start: string;
end: string;
};
}