Dha-theme NPM | npm.io

dha-theme

This module is used for applying DHA web style guide themes or custom theme.

Getting Started

Install

Install from npm:

npm i dha-theme

Theme Module

App.tsx - Functional component

import { StyledEngineProvider, ThemeProvider as MuiThemeProvider } from '@mui/material';
import { Layout } from 'components/index';
import { Tracker } from 'dha-analytics';
import { AppRoutes } from 'pages';
import { AuthProvider } from 'providers/AuthProvider';
import { DatabaseProvider } from 'providers/DatabaseProvider';
import DialogProvider from 'providers/DialogProvider';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import store, { persistor } from 'store/store';
import 'typeface-roboto';
import { createCustomTheme } from 'dha-theme';

const App: React.FC = () => {
  // Using default DHA light theme
  const dhaTheme = createCustomTheme();

  // Using available theme from palette based on DHA Web Style Guide ('afm', 'am', 'dha', 'mhs', 'nm')
  const afmTheme = createCustomTheme('afm');

  // Using dark theme by passing true as second argument
  const afmDarkTheme = createCustomTheme('afm', true);

  // Using custom dark theme by passing primary and secondary hex colors
  const customTheme = createCustomTheme('custom', true, '#0000FF', '#C0C0C0');

  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <StyledEngineProvider injectFirst>
          <MuiThemeProvider theme={afmDarkTheme}>
            <DatabaseProvider>
              <DialogProvider>
                <AuthProvider>
                  <Layout>
                    <AppRoutes />
                  </Layout>
                </AuthProvider>
              </DialogProvider>
            </DatabaseProvider>
          </MuiThemeProvider>
        </StyledEngineProvider>
      </PersistGate>
    </Provider>
  );
};

export default App;

App.tsx - Class component

import { StyledEngineProvider, ThemeProvider as MuiThemeProvider } from '@mui/material';
import { Layout } from 'components/index';
import { Tracker } from 'dha-analytics';
import { AppRoutes } from 'pages';
import { AuthProvider } from 'providers/AuthProvider';
import { DatabaseProvider } from 'providers/DatabaseProvider';
import DialogProvider from 'providers/DialogProvider';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import store, { persistor } from 'store/store';
import 'typeface-roboto';
import { createCustomTheme } from 'dha-theme';

class App extends React.Component {
  // Using default DHA light theme
  private dhaTheme = createCustomTheme();

  // Using available theme from palette based on DHA Web Style Guide ('afm', 'am', 'dha', 'mhs', 'nm')
  private afmTheme = createCustomTheme('afm');

  // Using dark theme by passing true as second argument
  private afmDarkTheme = createCustomTheme('afm', true);

  // Using custom dark theme by passing primary and secondary hex colors
  private customTheme = createCustomTheme('custom', true, '#00f', '#c0c0c0');

  render() {
    return (
      <Provider store={store}>
      <PersistGate persistor={persistor}>
        <StyledEngineProvider injectFirst>
          <MuiThemeProvider theme={afmDarkTheme}>
            <DatabaseProvider>
              <DialogProvider>
                <AuthProvider>
                  <Layout>
                    <AppRoutes />
                  </Layout>
                </AuthProvider>
              </DialogProvider>
            </DatabaseProvider>
          </MuiThemeProvider>
        </StyledEngineProvider>
      </PersistGate>
    </Provider>
    );
  }
}

export default App;