XMarkdown 主题

主题是普通 CSS。类名挂在 XMarkdown 的 className（或 Vue 的 class）上。

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

发布包的 themes/light.css 和 themes/dark.css 对应类名 x-markdown-light、x-markdown-dark。

Theme sample

Body text with a link.

• one
• two

Theme sample

Body text with a link.

• one
• two

同一段 Markdown，左右两套主题。

<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>

隐藏源代码

自定义主题

Vue 不用 cssinjs。可以在页面里加一层 class，覆盖标题、段落等样式；也可以按下面的贡献规范在 packages/x-markdown/themes/ 新增主题文件。

Custom theme sample

Section title

Body text with a link.

• one
• two
• three

页面级自定义样式覆盖 light 主题。

<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>

隐藏源代码

贡献主题（简要）

欢迎贡献新主题。约定：

1. 文件与类名

   • 文件：packages/x-markdown/themes/<theme-name>.css
   • 根类名：.x-markdown-<theme-name>（例如 ocean.css → .x-markdown-ocean）

2. 基础变量（可参考 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. 覆盖元素样式：标题、代码块、表格、列表、引用、链接等，尽量用 CSS 变量，便于二次覆盖。

4. 自测：在文档 demo 里 import '@ant-design-x-vue/x-markdown/themes/ocean.css'，并设置 className="x-markdown-ocean"。

5. 提交：基于 next 开 PR，说明主题用途，并更新本页示例列表（如有独立 demo）。

插件工具栏的主题 / 文案见 主题与文案。