# Appearance Configure color, theme mode, radius, and font tokens. import AppearanceConfigDemo from '@/components/AppearanceConfigDemo.astro'; import AccentColors from '@/components/AccentColors.astro'; import BackgroundTextColors from '@/components/BackgroundTextColors.astro'; import ThemeSwitchVariantDemo from '@/components/ThemeSwitchVariantDemo.astro'; `appearance` controls the document attributes and design tokens used by Lotus layouts and Prosefly MDX components. ## 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. The switch shape is a component override, not an `appearance` option. Use [Theme Switch Variants](/docs/recipes/theme-switch-variants/) to replace the default segmented control with a cycle button, select menu, or light/dark switch. ## Accent `accent` controls links, active navigation, focus rings, and primary UI. Built-in accents are based on Tailwind color scales: 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. ## Background and Text 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 brand-level background or text colors. The preset chooser below applies the generated variables to the current `` while you preview a combination, but it does not store the selection: Preset names are descriptive examples, not Lotus API values. Copy the generated CSS variables instead of depending on the preset labels. The most important variables are: | Variable | Purpose | | --- | --- | | `--lotus-background` | Page and shell background. | | `--lotus-surface` | Subtle panels, hover states, and soft UI. | | `--lotus-code-background` | Inline code and plain code block background. | | `--lotus-text-strong` | Headings, labels, and active text. | | `--lotus-text` | Body copy and default foreground. | | `--lotus-text-muted` | Secondary text, captions, and inactive navigation. | | `--lotus-text-subtle` | Lower-emphasis helper text. | | `--lotus-border-muted` | Normal control and panel borders. | | `--lotus-border-subtle` | Low-emphasis dividers and separators. | | `--lotus-border-hover` | Stronger 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.