From 10dad9008ddd82f2b9a92d0c6f727106cb7f746d Mon Sep 17 00:00:00 2001
From: Arpit Bhalla <55053424+arpitBhalla@users.noreply.github.com>
Date: Wed, 4 Jan 2023 04:50:06 +0530
Subject: [PATCH] docs: add themeprovider examples

---
 website/docs/customization/themeprovider.mdx | 24 +++++++++-----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/website/docs/customization/themeprovider.mdx b/website/docs/customization/themeprovider.mdx
index f5df65c99c..a0ce9960d2 100644
--- a/website/docs/customization/themeprovider.mdx
+++ b/website/docs/customization/themeprovider.mdx
@@ -260,43 +260,41 @@ export const App = () => {
 };
 ```
 
-### Switch theme mode with `useColorScheme`
+### Switch theme mode with useColorScheme
 
 ```tsx
-import React from 'react';
 import { useColorScheme } from 'react-native';
 import { useThemeMode } from '@rneui/themed';
 
-// create custom hook
-const useThemeModeScheme = () => {
+// use within ThemeProvider
+const ColorScheme = ({ children }) => {
   const colorScheme = useColorScheme();
   const { setMode } = useThemeMode();
+
   React.useEffect(() => {
     setMode(colorScheme);
   }, [colorScheme, setMode]);
+
+  return <>{children}</>;
 };
 ```
 
 **Usage**
 
 ```tsx
-// use within ThemeProvider
-const ChildComp = ({ children }) => {
-  useThemeModeScheme(); // our custom hook
-  // ...
-  // ...
-};
-
 export const App = () => {
   return (
     <ThemeProvider theme={theme}>
-      <ChildComp>
+      <ColorScheme>
+        {/*...*/}
+        {/*...*/}
+      </ColorScheme>
     </ThemeProvider>
   );
 };
 ```
 
-### Mode based background color
+### Theme mode based background color
 
 ```tsx
 const Background = ({ children }) => {