Theming & ConfigurationDmduskmoonimplemented4 demos

DmProvider

DmProvider applies shared theme, locale, direction, and component configuration to a subtree.

Import@duskmoon-dev/components/dm-provider

1API sections

7documented props

2behavior scenarios

Key API

componentthemeprefixClslocaledirection

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmProvider is most often configured through `component`, `theme`, `prefixCls`, `locale`.

Covered behavior

Provides Dm prefix and theme defaults

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

DuskMoon Dm Provider

Basic usage

authored

Import the component stylesheet and DmProvider from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmProvider } from "@duskmoon-dev/components/dm-provider";

export function Example() {
  return (<DmProvider>DuskMoon Dm Provider</DmProvider>);
}

Preview

DuskMoon Dm Provider

Provides Dm prefix and theme defaults

test-backed

DmProvider scenario from the component test coverage: provides dm prefix and theme defaults.

Source

import "@duskmoon-dev/components/styles.css";
import { DmProvider } from "@duskmoon-dev/components/dm-provider";

export function DmProviderProvidesDmPrefixAndDemo() {
  return (<DmProvider>DuskMoon Dm Provider</DmProvider>);
}

Preview

DuskMoon Dm Provider

Uses custom prefix and reacts to theme updates

test-backed

DmProvider scenario from the component test coverage: uses custom prefix and reacts to theme updates.

Source

import "@duskmoon-dev/components/styles.css";
import { DmProvider } from "@duskmoon-dev/components/dm-provider";

export function DmProviderUsesCustomPrefixAndDemo() {
  return (<DmProvider>DuskMoon Dm Provider</DmProvider>);
}

Preview

Sunshine Theme

DuskMoon Dm Provider

Moonlight Theme

DuskMoon Dm Provider

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmProvider>DuskMoon Dm Provider</DmProvider>
</div>

<div data-theme="moonlight">
  <DmProvider>DuskMoon Dm Provider</DmProvider>
</div>

API

The API reference below lists every parsed exported type or interface for DmProvider. Start with `component`, `theme`, `prefixCls`, `locale` for common usage.

Types: packages/components/src/components/dm-provider/DmProvider.types.tsScenarios: packages/components/src/components/dm-provider/DmProvider.test.tsx

DmProviderPropsinterface extends Omit< ComponentPropsWithoutRef<"div">, "children" | "className" >

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures DmProvider.
`className`	`string`	No	className configures DmProvider.
`component`	`ConfigProviderProps["component"]`	No	component configures DmProvider.
`theme`	`ConfigProviderContextValue["theme"]`	No	theme configures DmProvider.
`prefixCls`	`string`	No	prefixCls configures DmProvider.
`locale`	`Record<string, unknown>`	No	locale configures DmProvider.
`direction`	`ConfigProviderProps["direction"]`	No	direction configures DmProvider.