logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Code Examples
  • Streaming Rendering
  • Themes
  • Plugins
    • Overview
    • Latex
    • HighlightCode
    • Mermaid
    • CustomPlugins
    • Theme & Locale
  • Components
    • Think
    • DataChart
    • Custom Component

Themes

Resources

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

How to Import Themes

Import themes from @ant-design/x-markdown/themes/theme-name.css.

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


return <XMarkdown className="x-markdown-light" content="Hello XMarkdown!" />;

Import from Browser

Use script and link tags to directly import files in the browser, and inject the className into the component.

html
<script src="**/dist/themes/light.css"></script>

Code Examples

Contributing Themes

We welcome community contributions for new themes! Please follow these specifications for theme development:

Theme Naming Conventions

Theme files should follow these naming rules:

  • File name: theme-name.css
  • Class name prefix: x-markdown-theme-name
  • Example: x-markdown-ocean.css corresponds to class name x-markdown-ocean

Theme Development Specifications

1. File Structure

Place your theme files in the packages/x-markdown/src/themes/ directory:

packages/x-markdown/src/themes/
├── light.css          # Default light theme
├── dark.css           # Default dark theme
├── ocean.css          # Custom theme example
└── your-theme-name.css # Your theme file

2. Style Naming Rules

Theme styles must follow these naming conventions:

css
/* Base container */
.x-markdown-theme-name {
  /* Base style variables */
  --x-markdown-color-text: #333;
  --x-markdown-color-bg: #fff;
  --x-markdown-color-border: #e8e8e8;
  
  /* Code block styles */
  --x-markdown-color-code-bg: #f5f5f5;
  --x-markdown-color-code-text: #333;
  
  /* Heading styles */
  --x-markdown-color-heading: #262626;
  
  /* Link styles */
  --x-markdown-color-link: #1890ff;
  --x-markdown-color-link-hover: #40a9ff;
}


/* Code block highlighting */
.x-markdown-theme-name .x-markdown-highlight-code {
  background: var(--x-markdown-color-code-bg);
  border: 1px solid var(--x-markdown-color-border);
}


/* Table styles */
.x-markdown-theme-name .x-markdown-table {
  border-color: var(--x-markdown-color-border);
}


/* Blockquote styles */
.x-markdown-theme-name .x-markdown-blockquote {
  border-left-color: var(--x-markdown-color-link);
}

3. Development Steps

  1. Create Theme File:

    bash
    touch packages/x-markdown/src/themes/your-theme-name.css

  2. Define Base Variables: Use CSS variables to define colors, spacing, and other base styles.

  3. Implement Component Styles: Implement styles for various Markdown elements:

    • Headings (h1-h6)
    • Code blocks
    • Tables
    • Lists
    • Blockquotes
    • Links
    • Images

  4. Test Theme: Test your theme in the demo:

    tsx
    import '@ant-design/x-markdown/themes/your-theme-name.css';
    

    <XMarkdown className="x-markdown-your-theme-name" content="# Test Content" />

4. Submission Guidelines

Before submitting your theme, please ensure:

  1. Code Standards:

    • Follow project code standards
    • Pass npm run lint checks
    • Pass npm run test tests

  2. Documentation:

    • Add your theme description in themes.en-US.md
    • Provide theme preview screenshots
    • Create corresponding demo files

  3. Pull Request:

    • Create new branch based on master
    • Submit clear commit messages
    • Explain theme features and use cases in PR description

Theme Example

Here is a complete theme example:

css
/* x-markdown-ocean.css */
.x-markdown-ocean {
  /* Ocean theme color scheme */
  --x-markdown-color-text: #2c3e50;
  --x-markdown-color-bg: #f8fafc;
  --x-markdown-color-border: #e2e8f0;
  --x-markdown-color-primary: #0ea5e9;
  --x-markdown-color-secondary: #64748b;
  
  /* Code blocks */
  --x-markdown-color-code-bg: #f1f5f9;
  --x-markdown-color-code-border: #cbd5e1;
  
  /* Headings */
  --x-markdown-color-h1: #0f172a;
  --x-markdown-color-h2: #1e293b;
  --x-markdown-color-h3: #334155;
}


.x-markdown-ocean h1 {
  color: var(--x-markdown-color-h1);
  border-bottom: 2px solid var(--x-markdown-color-primary);
}


.x-markdown-ocean pre {
  background: var(--x-markdown-color-code-bg);
  border: 1px solid var(--x-markdown-color-code-border);
  border-radius: 6px;
}

Community Themes

We welcome community contributions for various theme styles, such as:

  • Tech-style themes
  • Minimalist themes
  • Retro-style themes
  • Dark theme variants
  • Corporate brand themes

Please submit your themes to GitHub Issues or send a Pull Request!

Using light theme
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Using dark theme
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom theme
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code