nym/ts-packages/mui-theme

Nym MUI Theme

This package provides an extension to the MUI theme system to use Nym branding.

If you are unfamiliar with Material UI theming, please read the following first:

• https://mui.com/customization/theming/
• https://mui.com/customization/palette/
• https://mui.com/customization/dark-mode/#dark-mode-with-custom-palette

Add theme typings to your project

This package also provides a template file to add typings to the theme using Typescript's module augmentation.

Read the following if you are unfamiliar with module augmentation and declaration merging. Then look at the recommendations from Material UI docs for implementation:

• https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
• https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
• https://mui.com/customization/palette/#adding-new-colors

Example usage

You can see an example of how to use this theme in react-webpack-with-theme-example:

export const App: React.FC = () => (
  <AppContextProvider>
    <AppTheme>
      <Content />
    </AppTheme>
  </AppContextProvider>
);

export const AppTheme: React.FC = ({ children }) => {
  const { mode } = useAppContext();

  return <NymThemeProvider mode={mode}>{children}</NymThemeProvider>;
};

export const Content: React.FC = () => {
  ...
  <Typography sx={{ color: (theme) => theme.palette.nym.networkExplorer.mixnodes.status.active }}>
    The quick brown fox jumps over the white fence
  </Typography>
  ...
}

Development

The best way to make changes to the theme is to:

1. Run this package in watch mode with yarn watch
2. Run Storybook from react-components with yarn storybook
3. Make sure the component you are changing is included in the playground
4. Watch for changes in the Playground story

Also remember to check light mode and dark mode!

Building

This package should be built from the root of the repository as follows:

yarn
yarn build

Publishing

This package is not published to NPM ... yet.