Lotus
English简体中文
Type to search documentation.

Getting Started

Appearance

Configure color, theme mode, radius, and font tokens.

View as MarkdownOpen in ChatGPTOpen in Claude

appearance controls the document attributes and design tokens used by Lotus layouts and Prosefly MDX components.

appearance: {
  accent: 'indigo',
  gray: 'neutral',
  defaultMode: 'system',
  radius: 'medium',
}

Accent

Gray

Radius

Default Mode

defaultMode controls the initial color mode.

ts
defaultMode: 'system'

Supported values are light, dark, and system. The system mode follows prefers-color-scheme until the visitor chooses a mode in the theme switch.

Theme Mode Control

themeModeControl chooses the built-in control shown in the header and mobile menu.

themeModeControl: 'segmented-control'
ValueBehavior
segmented-controlShows system, light, and dark as separate icon buttons.
buttonShows one button that cycles through system, light, and dark.
selectShows a select or dropdown with text labels.
switchShows a compact light/dark switch.
falseHides the control.

appearance.defaultMode still applies when the control is hidden.

Override ThemeSwitch only when a project needs custom markup or placement beyond these built-in controls.

Accent

accent controls links, active navigation, focus rings, and primary UI.

Built-in accents are based on Tailwind color scales:

red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Custom hex colors are also supported.

ts
appearance: {
  accent: '#3b82f6',
}

Lotus converts custom colors into light and dark accent variables.

Gray

gray selects the neutral scale used for text, borders, surfaces, dividers, and code backgrounds.

ts
gray: 'neutral'

Supported values are slate, zinc, neutral, and stone.

Lotus renders this as a document attribute such as data-gray="neutral" and maps semantic tokens like --lotus-text, --lotus-text-muted, --lotus-background, and --lotus-surface from that scale.

Style Presets

Background and text colors are not separate appearance fields. Lotus derives them from the selected gray scale and color mode, then exposes the result as CSS variables.

Use CSS variable overrides when a project needs a stronger brand direction. The preset chooser below applies copyable example CSS to the current page while you preview the result:

Style presets

Preview a custom CSS preset

These presets are copyable examples from src/styles/presets. Selecting one temporarily applies its CSS to this page.

Current preset

Select a preset

HeadingReadable docs
Body

A compact paragraph shows the prose rhythm.

Codeconst theme = 'lotus'

Copy into your project

claude.css
:root {
  --lotus-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --lotus-background: oklch(98.5% 0.018 85);
  --lotus-surface: oklch(96.2% 0.025 82);
  --lotus-text-strong: oklch(24% 0.035 58);
  --lotus-text: oklch(35% 0.03 58);
  --lotus-text-muted: oklch(49% 0.026 58);
  --lotus-text-subtle: oklch(62% 0.022 58);
  --lotus-border-muted: color-mix(in oklab, oklch(70% 0.04 72) 46%, transparent);
  --lotus-border-subtle: color-mix(in oklab, oklch(76% 0.035 75) 36%, transparent);
  --lotus-border-hover: color-mix(in oklab, oklch(64% 0.052 70) 62%, transparent);
  --lotus-code-background: oklch(95% 0.024 78);
  --lotus-code-border: color-mix(in oklab, oklch(68% 0.04 72) 42%, transparent);
  --lotus-accent: oklch(50% 0.115 52);
  --lotus-accent-soft: color-mix(in oklab, var(--lotus-accent) 11%, var(--lotus-background));
  --lotus-accent-contrast: oklch(99% 0.012 85);
}

.lotus-prose {
  --lotus-prose-font-heading: var(--lotus-serif);
  --lotus-prose-leading: 1.78;
}

.lotus-prose :where(h1, h2, h3, h4) {
  font-weight: 600;
  letter-spacing: 0;
}

.lotus-prose :where(blockquote) {
  background: color-mix(in oklab, var(--lotus-accent) 5%, var(--lotus-background));
  border-inline-start-color: color-mix(in oklab, var(--lotus-accent) 58%, transparent);
  border-radius: min(var(--lotus-radius-lg), 0.875rem);
  padding-block: 0.85em;
  padding-inline-end: 1rem;
}

[data-theme="dark"] {
  --lotus-background: oklch(20% 0.02 58);
  --lotus-surface: oklch(24% 0.022 58);
  --lotus-text-strong: oklch(94% 0.018 86);
  --lotus-text: oklch(86% 0.016 82);
  --lotus-text-muted: oklch(70% 0.018 76);
  --lotus-text-subtle: oklch(58% 0.018 72);
  --lotus-border-muted: color-mix(in oklab, oklch(62% 0.028 68) 34%, transparent);
  --lotus-border-subtle: color-mix(in oklab, oklch(62% 0.028 68) 22%, transparent);
  --lotus-border-hover: color-mix(in oklab, oklch(70% 0.034 68) 45%, transparent);
  --lotus-code-background: oklch(17% 0.018 58);
  --lotus-code-border: color-mix(in oklab, oklch(62% 0.028 68) 30%, transparent);
  --lotus-accent: oklch(73% 0.105 65);
  --lotus-accent-soft: color-mix(in oklab, var(--lotus-accent) 15%, var(--lotus-background));
  --lotus-accent-contrast: oklch(18% 0.025 58);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --lotus-background: oklch(20% 0.02 58);
    --lotus-surface: oklch(24% 0.022 58);
    --lotus-text-strong: oklch(94% 0.018 86);
    --lotus-text: oklch(86% 0.016 82);
    --lotus-text-muted: oklch(70% 0.018 76);
    --lotus-text-subtle: oklch(58% 0.018 72);
    --lotus-border-muted: color-mix(in oklab, oklch(62% 0.028 68) 34%, transparent);
    --lotus-border-subtle: color-mix(in oklab, oklch(62% 0.028 68) 22%, transparent);
    --lotus-border-hover: color-mix(in oklab, oklch(70% 0.034 68) 45%, transparent);
    --lotus-code-background: oklch(17% 0.018 58);
    --lotus-code-border: color-mix(in oklab, oklch(62% 0.028 68) 30%, transparent);
    --lotus-accent: oklch(73% 0.105 65);
    --lotus-accent-soft: color-mix(in oklab, var(--lotus-accent) 15%, var(--lotus-background));
    --lotus-accent-contrast: oklch(18% 0.025 58);
  }
}
{
  "head": [
    { "tag": "style", "src": "./src/styles/presets/claude.css" }
  ]
}

Preset names are descriptive examples, not Lotus API values. Copy a preset from src/styles/presets/ into your project, adjust it, and load it with head:

theme.config.json
{
  "head": [
    { "tag": "style", "src": "./src/styles/presets/claude.css" }
  ]
}

The most important variables are:

VariablePurpose
--lotus-backgroundPage background.
--lotus-header-backgroundHeader background.
--lotus-footer-backgroundFooter background.
--lotus-surfaceSubtle panels, hover states, and soft UI.
--lotus-code-backgroundInline code and code body background.
--lotus-code-surfaceCode frame header, tab bar, and toolbar surface.
--lotus-text-strongHeadings, labels, and active text.
--lotus-textBody copy and default foreground.
--lotus-text-mutedSecondary text, captions, and inactive navigation.
--lotus-text-subtleLower-emphasis helper text.
--lotus-border-mutedNormal control and panel borders.
--lotus-border-subtleLow-emphasis dividers and separators.
--lotus-border-hoverStronger borders for hover and focus-adjacent states.

Override these tokens together. Changing only --lotus-background or only --lotus-text usually creates contrast, hover, border, or code-block issues.

Radius

radius controls the shared shape language.

ts
radius: 'medium'

Supported values are none, small, medium, large, and full.

Most compact controls follow the selected radius. Large surfaces such as code blocks and dropdown panels cap their radius so full does not produce pill-like containers.

Fonts

Lotus does not load web fonts by default. It exposes font tokens that can be overridden by project CSS.

css
:root {
  --lotus-font-sans: "Inter", var(--lotus-system-sans);
  --lotus-font-mono: "JetBrains Mono", var(--lotus-system-mono);
}

The default stacks are system sans and system mono.

Last updated Aug 12, 2026

Contributors