Tabs
Clean underline style — flat border-bottom indicator, brand color on active, no background fill.
Package manager
- npm
- yarn
- pnpm
npm install cosmos-docusaurus-theme
yarn add cosmos-docusaurus-theme
pnpm add cosmos-docusaurus-theme
Dark / Light palette reference
- Void — Dark
- Slate — Light
- Brand
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 */
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 */
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
- Vue / Vuepress
import { themes } from 'cosmos-docusaurus-theme';
export default {
themes: ['cosmos-docusaurus-theme'],
};
// 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
- Vue / Vuepress
Synced with the tab above — clicking Vue there also selects it here.
Both tab groups switch together when groupId matches.