Docusaurus Theme No Style

Docusaurus Theme No Style is a minimal, opinionated styling theme for Docusaurus 2 documentation sites that strips the default classic theme down to a layout based on semantic HTML tags and no class names.

What is Docusaurus Theme No Style?

Docusaurus Theme No Style is a community theme for Docusaurus 2, derived by trimming down the official @docusaurus/theme-classic package. It applies only a minimal set of opinionated styles: CSS selectors target semantic HTML tags and ARIA roles instead of class names, and the docs and blog layouts use a CSS grid with two side sections and a main content area in the middle. The theme is published as @wgao19/docusaurus-theme-no-style and is intended as a starting point for developers who want to build their own custom styles on top of Docusaurus without fighting the default theme's opinions.

Key Features

• Semantic selector styling — All CSS selectors use semantic HTML tags with roles rather than class names, so the theme makes no assumptions about component-specific markup.
• Grid-based layout — Docs and blog pages are laid out with a CSS grid: two side sections and one main section in the middle, giving a fixed three-column structure.
• Fixed padding — Accessory sections use a consistent 1rem padding value throughout the theme.
• Base on theme-classic — Built by trimming the official @docusaurus/theme-classic package, so it inherits Docusaurus 2's component structure and conventions.
• Swizzle-friendly — Styles are concentrated in the Layout component, so you can copy it to your site's src directory with yarn swizzle @wgao19/docusaurus-theme-no-style Layout and override CSS directly.
• Component-level swizzling — Individual components from src/theme/ can also be swizzled when you need to change the DOM structure or styling of a specific part.

Who is it for?

Developers building Docusaurus 2 sites who want a bare-bones theme they can fully control. Specifically:

• Docusaurus site maintainers who find the default classic theme's styles too opinionated and want a clean slate for custom CSS.
• Frontend developers who prefer to style everything themselves using semantic HTML and CSS grid rather than relying on pre-built class names.
• Theme authors who want a minimal base from which to create their own Docusaurus theme by swizzling components.

What can you do with it?

• Customize the layout — Swizzle the Layout component with the provided command, then edit the copied CSS to adjust the grid, padding, or any other style without changing the DOM structure of individual components.
• Replace component styling — Swizzle any single component from src/theme/ when you need to change its DOM structure or styling, giving you fine-grained control over part of the site.
• Build a brand-specific Docusaurus site — Start from the no-style theme and add your own design system, since the base CSS is minimal and confined to layout and spacing.

How does it work?

The theme works by overriding the components that Docusaurus 2 loads from the default classic theme. After installing and activating the theme's package, Docusaurus uses the trimmed components defined in src/theme/. To customize styles, you run yarn swizzle @wgao19/docusaurus-theme-no-style Layout (or any component name), which copies the selected component into your site's src directory. Restart the dev server, and your local copy takes precedence over the theme's version, allowing you to edit the source directly.

FAQ

What is the purpose of "no style"?

The name means the theme ships only the minimal opinionated styling needed for a functional layout — semantic selectors, a three-column grid, and fixed 1rem padding — rather than a full visual design. It's designed to be overwritten.

How do I overwrite the styles?

The recommended method is swizzling: run yarn swizzle @wgao19/docusaurus-theme-no-style Layout to copy the Layout component into your site's src directory, then edit that copy's CSS. Most of the theme's styles live in that component.

Can I style individual components separately?

Yes. Each component in the theme's src/theme/ directory can be swizzled individually with the same yarn swizzle command, letting you modify both the DOM structure and the styling of one component without affecting the rest.

Does this theme work with Docusaurus 3?

The repository description targets Docusaurus 2, and the trim-down is based on the Docusaurus 2 classic theme. No statement about Docusaurus 3 support appears in the provided content.