diff --git a/README.md b/README.md
index 22d47d0..bc0ac64 100644
--- a/README.md
+++ b/README.md
@@ -46,19 +46,19 @@ Integrate Skiff components into your project easily, as shown below:
[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/button-example-rfp4jn)
-## ThemeProvider
-To display Skiff UI components correctly, add the ThemeProvider at the root of your app.
+## AppThemeProvider
+To display Skiff UI components correctly, add the AppThemeProvider at the root of your app.
```typescript
import * as React from 'react';
- import { ThemeProvider } from '@skiff-org/skiff-ui';
+ import { AppThemeProvider } from '@skiff-org/skiff-ui';
function App({ Component }) {
return (
-
+
-
+
);
}
```
diff --git a/src/theme/AppThemeProvider.tsx b/src/theme/AppThemeProvider.tsx
index 800a4b0..9e98898 100644
--- a/src/theme/AppThemeProvider.tsx
+++ b/src/theme/AppThemeProvider.tsx
@@ -1,5 +1,5 @@
import noop from 'lodash/noop';
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import React, { PropsWithChildren, createContext, useCallback, useContext, useEffect, useState } from 'react';
import { LocalStorageThemeMode, StorageOnlyThemeMode, ThemeMode } from 'src/types';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
@@ -38,7 +38,7 @@ const GlobalStyles = createGlobalStyle`
font-smoothing: antialiased;
}
`;
-export const AppThemeProvider: React.FC = ({ children }) => {
+export const AppThemeProvider: React.FC> = ({ children }) => {
const [themeName, setThemeName] = useState(ThemeMode.DARK);
const [storedThemeState, setStoredThemeState] = useState(StorageOnlyThemeMode.SYSTEM);