@crowdhub/crowdhub-components-library

CrowdHub Component Library

Installation

yarn add @crowdhub/crowdhub-components-library

Usage

Theme

Applying theme to the CrowdHub and MaterialUI components.

import { ThemeModeToggle, CrowdHubThemeProvider } from '@crowdhub/crowdhub-components-library/theme'
import { IonicPalette } from '@crowdhub/crowdhub-components-library/models'
import React, { useState } from 'react';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/ionic.bundle.css';

const initialPalette: IonicPalette = {
  primary: '#BF2E92',
  secondary: '#271836',
  tertiary: '#d506fa',
  success: '#2DD36F',
  warning: '#FFC409',
  danger: '#EB445A',
  dark: '#222428',
  medium: '#92949C',
  light: '#F4F5F8',
  coefficient: 0.07,
};


const App: React.FC = () => {
  const [palette, setPalette] = useState<IonicPalette>(initialPalette);
  const [darkPalette, setDarkPalette] =
    useState<IonicPalette>(initialDarkPalette);
  const [themeMode, setThemeMode] = useState<ThemeMode>('light');

  const onThemeModeChange = (mode: ThemeMode) => {
    setThemeMode(mode);
  };

  return (
          <CrowdHubThemeProvider
            palette={palette}
            darkPalette={darkPalette}
            themeMode={themeMode}
            darkModeCoefficient={0.3}
          >
          <ThemeModeToggle onChange={onThemeModeChange} />
    </ThemeProvider>
  );
}