CSS theming

自定义 Rho 的视觉——CSS variables 是首选；override class / 全自定义也支持。

引入默认 CSS

import '@rho/md/css';

或：

<link rel="stylesheet" href="path/to/@rho/md/css/stl-md.css">

默认 CSS 包含所有 DSL 的样式 + light/dark theme + responsive。

CSS variables（首选定制方式）

Rho 把所有可定制颜色 / 间距 / typography 暴露为 CSS variables，作用域 .markdown-body：

.markdown-body {
  /* === Color base === */
  --bg-color: #ffffff;
  --text-color: #1a1a2e;
  --muted-color: #6b7280;
  --border-color: #e5e7eb;
  --code-bg: #f8f8f8;

  /* === Accent palette (6 colors) === */
  --accent-blue: #2563eb;
  --accent-red: #dc2626;
  --accent-green: #16a34a;
  --accent-yellow: #ca8a04;
  --accent-purple: #9333ea;
  --accent-gray: #6b7280;

  /* === Spacing === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* === Typography === */
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-size-base: 16px;
  --line-height-base: 1.65;

  /* === Border radius === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

改 brand 色 —— 一行搞定：

.markdown-body {
  --accent-blue: #007aff;     /* iOS 蓝 */
  --accent-purple: #a020f0;   /* 自定义紫 */
}

→ 所有用 accent=blue 的 callout / card / annotation 全部跟着变。

Dark theme

Rho 默认提供 dark theme，触发方式两种：

方式 A：data-theme 属性

<div class="markdown-body" data-theme="dark">
  ...
</div>

方式 B：跟随 system preferences

@media (prefers-color-scheme: dark) {
  .markdown-body {
    --bg-color: #0f1115;
    --text-color: #e8ecf1;
    --muted-color: #8a93a3;
    --border-color: #2a2f3c;
    --code-bg: #1c2030;

    --accent-blue: #60a5fa;
    --accent-red: #f87171;
    --accent-green: #34d399;
    --accent-yellow: #fbbf24;
    --accent-purple: #c084fc;
    --accent-gray: #94a3b8;
  }
}

CSS class hooks

Rho 输出的 HTML 用稳定 class 命名，让你可以完全 override 默认样式：

完整 class list 见源码（CSS 文件本身）。

自定义 callout 类型

Rho 内置 8 种 callout 类型（INFO/WARN/ZEN + 5 GFM）。加自己的类型：

.markdown-body .rho-callout-custom-tip {
  --callout-bg: rgba(255, 200, 0, 0.1);
  --callout-border: orange;
  --callout-icon-color: orange;
}

.markdown-body .rho-callout-custom-tip .rho-callout-icon::before {
  content: "💡";
}

之后 markdown 里 > [!CUSTOM_TIP] 就用这个样式（Rho 不识别但保留 type 字符串到 class）。

注意：> [!CUSTOM_TIP] 在不支持 reader 里显示为 [!CUSTOM_TIP] 字面量——非标准类型自然破坏 plain-text fallback 的优雅度。建议只用标准 8 种类型。

Per-block 样式覆盖

/* 改 layout grid 默认 gap */
.markdown-body .rho-layout-grid {
  gap: 32px;
}

/* 改 tab bar 颜色 */
.markdown-body .rho-tabs-bar {
  background: linear-gradient(to right, #007aff, #5856d6);
}

/* 改 slider track 颜色 */
.markdown-body .rho-slider input[type="range"] {
  accent-color: #ff3b30;
}

Tailwind / CSS-in-JS 集成

Tailwind

Rho CSS 跟 Tailwind 不冲突（不同 namespace）。在 Tailwind 项目里：

1. import '@rho/md/css' 引入 Rho 默认样式
2. 用 Tailwind 写自己的页面 / wrapper
3. .markdown-body 内部走 Rho CSS，外面走 Tailwind

如果想让 Rho 用你的 Tailwind 配色：

@layer components {
  .markdown-body {
    --accent-blue: theme('colors.blue.600');
    --accent-red: theme('colors.red.600');
    --bg-color: theme('colors.white');
    --text-color: theme('colors.gray.900');
  }
}

CSS-in-JS (Emotion / styled-components)

import { css, Global } from '@emotion/react';

const rhoTheme = css`
  .markdown-body {
    --accent-blue: ${myTheme.brand};
    --accent-green: ${myTheme.success};
    /* ... */
  }
`;

<>
  <Global styles={rhoTheme} />
  <div className="markdown-body">{rhoHTML}</div>
</>

完全自定义样式（不用默认 CSS）

// 不 import '@rho/md/css'
import { hydrateAll, renderRho } from '@rho/md';

然后写完全自己的.rho-* class CSS（参考默认 CSS 文件作起点）。这种用法适合：

• 跟现有 design system 深度整合
• 完全定制视觉
• 移除 Rho 默认外观开销

CSS 文件位置 / 大小

@rho/md/css/stl-md.css        ← 完整 CSS（~30 KB unminified）
@rho/md/css/stl-md.min.css    ← Minified（~8 KB）

See also

• API reference
• Quick start — 标准引入
• Hydration utilities — 不影响 CSS（hydration 只加 class，不改样式）
• 默认 CSS 源文件：node_modules/@rho/md/css/stl-md.css（看具体规则）