XMarkdown themes

The theme is normal CSS. Class names are attached to XMarkdown's className (or Vue's class).

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import '@ant-design-x-vue/x-markdown/themes/light.css';

The published package's themes/light.css and themes/dark.css correspond to class names x-markdown-light and x-markdown-dark.

Theme sample

Body text with a link.

• one
• two

Theme sample

Body text with a link.

• one
• two

The same Markdown rendered with two themes.

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownThemesV2' });

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import { Flex } from 'ant-design-vue';
import '@ant-design-x-vue/x-markdown/themes/light.css';
import '@ant-design-x-vue/x-markdown/themes/dark.css';

const content = [
  '# Theme sample',
  '',
  'Body text with a [link](https://x.ant.design).',
  '',
  '- one',
  '- two',
].join('\n');

defineRender(() => (
  <Flex gap={16} wrap="wrap">
    <div style={{ flex: '1 1 240px', padding: '12px', background: '#fff' }}>
      <XMarkdown className="x-markdown-light" content={content} />
    </div>
    <div style={{ flex: '1 1 240px', padding: '12px', background: '#141414' }}>
      <XMarkdown className="x-markdown-dark" content={content} />
    </div>
  </Flex>
));
</script>

Hide source

Custom theme

Vue does not use cssinjs. You can add a class in the page to override styles for headings, paragraphs, etc.; or you can add a theme file in packages/x-markdown/themes/ following the contribution guidelines below.

Custom theme sample

Section title

Body text with a link.

• one
• two
• three

Page-level custom styles overriding the light theme.

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownThemesCustomV2' });

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import '@ant-design-x-vue/x-markdown/themes/light.css';

const content = `
# Custom theme sample

## Section title

Body text with a [link](https://x.ant.design).

- one
- two
- three
`;

defineRender(() => (
  <div class="ax-xmd-custom-theme" style={{ padding: '16px' }}>
    <XMarkdown className="x-markdown-light ax-xmd-custom" content={content} />
  </div>
));
</script>

<style>
.ax-xmd-custom-theme .ax-xmd-custom h1 {
  color: #1677ff;
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
}

.ax-xmd-custom-theme .ax-xmd-custom h1::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #1677ff, #69b1ff);
  border-radius: 2px;
}

.ax-xmd-custom-theme .ax-xmd-custom h2 {
  color: rgba(0, 0, 0, 0.88);
  font-size: 20px;
  margin: 24px 0 12px;
  padding-left: 12px;
  border-left: 4px solid #1677ff;
}

.ax-xmd-custom-theme .ax-xmd-custom p,
.ax-xmd-custom-theme .ax-xmd-custom li {
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.8;
}
</style>

Hide source

Contributing a theme (brief)

Contributions of new themes are welcome. Convention:

1. File and Class Name

• File: packages/x-markdown/themes/<theme-name>.css
• Root class name: .x-markdown-<theme-name> (for example, ocean.css → .x-markdown-ocean)

2. Basic Variables (refer to light.css)

.x-markdown-ocean {
  --font-size: 14px;
  --primary-color: #0ea5e9;
  --heading-color: #0f172a;
  --text-color: #2c3e50;
  --border-color: #e2e8f0;
  --light-bg: #f1f5f9;
  --table-head-bg: #f8fafc;
  --table-body-bg: #ffffff;
  /* …其余间距 / 圆角变量与 light 对齐 */
}

3. Override Element Styles: headings, code blocks, tables, lists, blockquotes, links, etc., try to use CSS variables for easier secondary overrides.

4. Self-Test: In the document demo, import '@ant-design-x-vue/x-markdown/themes/ocean.css' and set className="x-markdown-ocean".

5. Submit: Open a PR based on next, explain the theme's purpose, and update the example list on this page (if there is a separate demo).

For plugin toolbar themes/text, see Themes and Text.