Dumi Theme Mobile is a mobile-focused theme for the Dumi documentation generator that provides responsive layouts, touch-optimized navigation, and mobile-specific components for creating documentation websites that work seamlessly on mobile devices. It extends Dumi's default theme with mobile enhancements while maintaining full compatibility with the core dumi system.
npm install dumi-theme-mobile --save-devThis package follows dumi's theme convention where components are automatically resolved through theme aliases. No direct imports are needed - dumi detects and loads theme components automatically based on the dumi-theme- prefix.
Theme Resolution:
// Dumi automatically resolves these theme components:
// dumi/theme/layouts/DemoLayout -> dumi-theme-mobile/layouts/DemoLayout
// dumi/theme/slots/Device -> dumi-theme-mobile/slots/Device
// dumi/theme/builtins/Previewer -> dumi-theme-mobile/builtins/Previewer
// dumi/theme/slots/PreviewerActions -> dumi-theme-mobile/slots/PreviewerActionsInstall as a dev dependency and configure in your dumi configuration:
// .dumirc.ts
export default {
themeConfig: {
// Configure device width (default: 375px)
deviceWidth: 375,
// Configure HD scaling rules
hd: {
rules: [
{
mode: 'vw',
options: [100, 750],
minWidth: 750
}
]
}
}
};Dumi Theme Mobile extends the dumi theme system with:
Enhanced demo layout that provides mobile-optimized rendering with HD scaling and touch emulation for demo pages.
// Available through dumi theme system as DemoLayout
// Component takes no props - uses hooks to access data
const MobileDemoLayout: React.FC;
// Route message constant for iframe communication
const ROUTE_MSG_TYPE: "dumi:update-iframe-route";Mobile device frame component that renders demos within a simulated mobile device interface.
interface IDeviceProps {
url: string;
inlineHeight?: number;
}
// Available through dumi theme system as Device slot
const Device: React.FC<IDeviceProps>;Mobile-enhanced previewer component that wraps dumi's default previewer with mobile-specific functionality.
import type { IPreviewerProps } from 'dumi';
// Available through dumi theme system as Previewer builtin
// Uses IPreviewerProps from dumi directly - no custom interface
const MobilePreviewer: React.FC<IPreviewerProps>;Enhanced previewer actions that add QR code functionality for easy mobile testing.
import type { ComponentProps } from 'react';
import PreviewerActions from 'dumi/theme-default/slots/PreviewerActions';
// Inline type definition - extends default PreviewerActions props
type MobilePreviewerActionsProps = ComponentProps<typeof PreviewerActions> & {
qrCodeUrl?: string;
};
// Available through dumi theme system as PreviewerActions slot
const MobilePreviewerActions: React.FC<MobilePreviewerActionsProps>;export interface IThemeConfig {
/**
* HD solution configurations based on umi-hd
* @see https://github.com/umijs/umi-hd
*/
hd?: {
rules: {
/** Minimum width for this rule to apply */
minWidth?: number;
/** Maximum width for this rule to apply */
maxWidth?: number;
/** HD scaling mode */
mode: 'vl' | 'flex' | 'vw' | 'vh';
/** Mode-specific options */
options?: number | [number, number];
}[];
};
/**
* Set device width in pixels for desktop preview
* @default undefined (uses browser default)
*/
deviceWidth?: number;
}
/**
* Available HD scaling modes from umi-hd (actual implementation uses 'any' type)
* Each mode provides different scaling strategies for high-DPI displays
*/
interface HDModes {
/** Variable Layout: Flexible scaling based on viewport */
vl: any;
/** Flexbox-based scaling */
flex: any;
/** Viewport width based scaling */
vw: any;
/** Viewport height based scaling */
vh: any;
}Runtime Dependencies:
@ant-design/icons-svg: Icon components for UI elementsf2-touchemulator: Touch event simulation for desktop browsersqrcode.react: QR code generation for mobile preview URLsumi-hd: HD scaling solutions for high-DPI displaysPeer Dependencies:
dumi: ^2.2.0 (required theme host)react: >=16.8 (React framework)react-dom: >=16.8 (React DOM rendering)