Skip to main content

Theme

Setup​

You can control you theme by theme props in ThemeProvider

import {
  CurrentTheme,
  defaultSpaces,
  getShadows,
  ThemeProvider,
} from '@lad-tech/mobydick-core';
import {Navigation} from '@pages/Navigation';
import {themeColors} from '@shared/lib/theme';
import {fonts} from '@shared/lib/theme/deafultFont';


function App() {
  return (
    <ThemeProvider
      theme={{
        currentTheme: CurrentTheme.light,
        colors: themeColors,
        spaces: {
          ...defaultSpaces,
        },
        fonts: fonts,
        shadows: getShadows({
          spaces: defaultSpaces,
          currentTheme: CurrentTheme.light,
        }),
      }}>
        <Navigation />
    </ThemeProvider>
  );
}

export default App

Props​

Required
currentTheme​

TYPE
string

Name one of theme

Required
colors​

TYPE
colors

All possible colors group by theme

Required
spaces​

TYPE
space

All possible spaces

Required
fonts​

TYPE
fonts

Map for font

Required
shadows​

TYPE
shadow

Map for shadow