Syntax themes

The same theme colors your MDX code blocks and the generated API examples. Importing the component styles includes the default theme:

import "@ariadocs/components/styles.css";

To use a different theme, import the base styles and the theme file:

import "@ariadocs/components/styles/theme.css";
import "@ariadocs/components/styles/syntax/nord.css";

Every theme has dark colors that apply under a .dark class.

Your own theme

Themes style Prism's token classes:

.token.keyword { color: #c678dd; }
.token.string { color: #98c379; }
.token.property { color: #e06c75; }
.dark .token.keyword { color: #d19af0; }