@os-design/theming

Before you start using the os-design components, you need to add the ThemeProvider that will apply the theme to all the components used.

Installation

Step 1. Install the package

Install the package using the following command:

yarn add @os-design/theming

Also make sure that you have the @emotion/react package installed.

Step 2. Redefine the emotion theme

Create the emotion.d.ts file with the following content:

import '@emotion/react';
import { Theme as BaseTheme } from '@os-design/theming';

declare module '@emotion/react' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface Theme extends BaseTheme {}
}

Step 3. Wrap your app in ThemeProvider

For example:

import React from 'react';
import { ThemeProvider } from '@os-design/theming';
import AppRouter from './AppRouter';

const App: React.FC = () => (
  <ThemeProvider>
    <AppRouter />
  </ThemeProvider>
);

export default App;

See all theming features in the Storybook.