Tabs

Clean underline style — flat border-bottom indicator, brand color on active, no background fill.

Package manager

npm

npm install cosmos-docusaurus-theme

yarn

yarn add cosmos-docusaurus-theme

pnpm

pnpm add cosmos-docusaurus-theme

Dark / Light palette reference

Void — Dark

The Void palette uses Tailwind neutral-950/900/800 blacks — no blue tint.

--ifm-background-color:         #030712; /* gray-950 */
--ifm-background-surface-color: #111827; /* gray-900 */
--ifm-font-color-base:          #e5e5e5;
--ifm-toc-border-color:         #1f2937; /* gray-800 */

Slate — Light

The Slate palette uses warm white backgrounds with brown text tones.

--ifm-background-color:         #f9fafb; /* gray-50 */
--ifm-background-surface-color: #ffffff;
--ifm-font-color-base:          #1a1714; /* warm near-black */
--ifm-toc-border-color:         #e5e7eb; /* gray-200 */

Brand

The brand color is indigo #465fff — lighter variant #7592ff for dark mode.

--ifm-color-primary:       #465fff; /* light mode */
--ifm-color-primary:       #7592ff; /* dark mode  */

With code comparison

React

import { themes } from 'cosmos-docusaurus-theme';

export default {
  themes: ['cosmos-docusaurus-theme'],
};

Vue / Vuepress

// Not applicable — cosmos-docusaurus-theme is Docusaurus-specific.
// For VitePress, use the raw CSS import:
import 'cosmos-docusaurus-theme/css/theme.css';

Synced tabs

Tabs with the same groupId stay in sync across all instances on the page.

React

Synced with the tab above — clicking Vue there also selects it here.

Vue / Vuepress

Both tab groups switch together when groupId matches.