@matrix-widget-toolkit/mui


This package provides a Mui theme that fits to the default Element theme.
It provides:

- Themes that match Element Web (the only Matrix Client that supports the matrix-widget-api right now)
- A light, dark, and high-contract mode
- Adjustments to fulfill accessibility standards

Usage

Install it with:

``bash
yarn add @matrix-widget-toolkit/mui @mui/material
`

$3

Now you can use it in your application:

`tsx
import { WidgetApiImpl } from '@matrix-widget-toolkit/api';
import {
MuiThemeProvider,
MuiWidgetApiProvider,
} from '@matrix-widget-toolkit/mui';
import { Button } from '@mui/material';

// Initiate the widget API on startup. The Client will initiate
// the connection with capabilities and we need to make sure
// that the message doesn't get lost while we are initiating React.
const widgetApiPromise = WidgetApiImpl.create();

function App() {
return (


A styled button


);
}

export default App;
`

$3

The matrix-widget-toolkit uses i18next to provide translations for messages.
To make it work in your widget you have to initialize it on your end.
See the i18next getting started documentation.
This package provides a WidgetToolkitI18nBackend containing the translation data.
You can use the ChainedBackend plugin to load translation data for the matrix-widget-toolkit together the translation data for the widget itself.
The package provides a WidgetApiLanguageDetector that detects the language from the widget parameters with the i18next-browser-languagedetector plugin.
For more details, see the implementation in the example widget.

$3

You can hide child components till the user has approved all required capabilities:

`tsx
import { MuiCapabilitiesGuard } from '@matrix-widget-toolkit/mui';
import { EventDirection, WidgetEventCapability } from 'matrix-widget-api';

capabilities={[
WidgetEventCapability.forStateEvent(
EventDirection.Receive,
STATE_EVENT_ROOM_NAME,
),
]}
>
/ Children are only displayed once the user has approved all capabilities. /
;
`

Customization

You can override the light primary color by setting the REACT_APP_LIGHT_PRIMARY_COLOR environment variable.

You can override the dark primary color by setting the REACT_APP_DARK_PRIMARY_COLOR environment variable.

> Warning Choosing a different primary color might result in not meeting contrast requirements for accessability.

You can force the high contrast theme by setting the REACT_APP_FORCE_HIGH_CONTRAST_THEME` environment variable.