@dojo-ng/theme
v0.1.2
Published
Dojo NG theme tokens and scoping element
Readme
@dojo-ng/theme
<dj-theme> — Scopes a theme to part of the page.
Part of Dojo NG, a framework-agnostic web component library built on Lit. BSD-3-Clause.
Set theme to light or dark. dj-theme sets data-dj-theme on itself, so the token rules in theme.css apply, and the tokens inherit into descendants and their shadow roots.
autoremoves the attribute. The subtree then follows the surrounding theme, or the operating system setting at the page root.- Load
theme.cssonce for the page.
Install
npm install @dojo-ng/themeUsage
Import the package to register the custom element, then use the tag.
Force a theme for a subtree.
<dj-theme theme="dark">
<dj-button>Always dark</dj-button>
</dj-theme>Properties
↻ marks an attribute reflected to the DOM; a dash means the property is set in JavaScript only.
| Property | Attribute | Type | Default |
|---|---|---|---|
| theme | theme | ThemeName | "auto" |
Slots
- default slot
Theming
Styled with Dojo NG --dj-* design tokens and exposes ::part() hooks for targeted overrides.
Accessibility and i18n
Follows the project's WCAG 2.2 AA and localization conventions.
More
Live, interactive examples are at play.dojo-ng.com. For the full API reference, theming, accessibility, and localization guides, see the Dojo NG documentation.
