changes in metatitle and metadescription in color mode

docs/3.0.x/color-mode.md

@@ -1,6 +1,8 @@
 ---
 id: color-mode
 title: Color mode (Dark Mode)
+metaTitle: Color mode (Dark Mode) | NativeBase
+metaDescription: The NativeBaseProvider at the root of your app to automatically uses color mode. useColorMode or useColorModeValue hooks handle color mode manually.
 ---
 
 When you use the `NativebaseProvider` at the root of your app, you can automatically use color mode in your apps.
@@ -18,7 +20,7 @@ Calling toggleColorMode anywhere in your app tree toggles the color mode.
 `useColorModeValue` is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value in light mode, and the value in dark mode.
 
 ```jsx isLive=true
-import React from 'react';
+import React from "react";
 import {
   Heading,
   useColorMode,
@@ -28,15 +30,15 @@ import {
   Center,
   useColorModeValue,
   NativeBaseProvider,
-} from 'native-base';
+} from "native-base";
 
 function ColorModeExample() {
   const { colorMode, toggleColorMode } = useColorMode();
   return (
     <>
       <Heading>I'm a Heading</Heading>
       <Button
-        colorScheme={colorMode === 'light' ? 'blue' : 'red'}
+        colorScheme={colorMode === "light" ? "blue" : "red"}
         onPress={() => {
           toggleColorMode();
         }}
@@ -48,14 +50,14 @@ function ColorModeExample() {
           name="Ankur"
           borderWidth={2}
           source={{
-            uri: 'https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg',
+            uri: "https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg",
           }}
         />
         <Avatar
           name="Rohit"
           borderWidth={2}
           source={{
-            uri: 'https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg',
+            uri: "https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg",
           }}
         />
       </HStack>
@@ -64,7 +66,7 @@ function ColorModeExample() {
 }
 
 const LocalWrapper = ({ children }) => {
-  const bg = useColorModeValue('gray.200', 'gray.800');
+  const bg = useColorModeValue("gray.200", "gray.800");
   return (
     <Center flex={1} bg={bg}>
       {children}
@@ -88,12 +90,12 @@ export function Example() {
 You can set default color mode. By default, the color mode will be `light`. To support this, extend the default theme with a `config`
 
 ```jsx
-import { NativeBaseProvider, extendTheme, Text } from 'native-base';
+import { NativeBaseProvider, extendTheme, Text } from "native-base";
 
 // Define the config
 const config = {
   useSystemColorMode: false,
-  initialColorMode: 'dark',
+  initialColorMode: "dark",
 };
 
 // extend the theme
@@ -113,24 +115,24 @@ function App() {
 You can persist the color mode in you app by defining you color mode manager of type `StorageManager` and passing it to the NativeBaseProvider. This will retain the color mode even when the app is refreshed.
 
 ```jsx
-import React from 'react';
-import { NativeBaseProvider, StorageManager, ColorMode } from 'native-base';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import React from "react";
+import { NativeBaseProvider, StorageManager, ColorMode } from "native-base";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 // Define the colorModeManager,
 // here we are using react-native-async-storage (https://react-native-async-storage.github.io/async-storage/)
 const colorModeManager: StorageManager = {
   get: async () => {
     try {
-      let val = await AsyncStorage.getItem('@color-mode');
-      return val === 'dark' ? 'dark' : 'light';
+      let val = await AsyncStorage.getItem("@color-mode");
+      return val === "dark" ? "dark" : "light";
     } catch (e) {
-      return 'light';
+      return "light";
     }
   },
   set: async (value: ColorMode) => {
     try {
-      await AsyncStorage.setItem('@color-mode', value);
+      await AsyncStorage.setItem("@color-mode", value);
     } catch (e) {
       console.log(e);
     }

docs/3.1.x/color-mode.md

@@ -1,6 +1,8 @@
 ---
 id: color-mode
 title: Color mode (Dark Mode)
+metaTitle: Color mode (Dark Mode) | NativeBase
+metaDescription: The NativeBaseProvider at the root of your app to automatically uses color mode. useColorMode or useColorModeValue hooks handle color mode manually.
 ---
 
 When you use the `NativebaseProvider` at the root of your app, you can automatically use color mode in your apps.
@@ -18,7 +20,7 @@ Calling toggleColorMode anywhere in your app tree toggles the color mode.
 `useColorModeValue` is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value in light mode, and the value in dark mode.
 
 ```jsx isLive=true
-import React from 'react';
+import React from "react";
 import {
   Heading,
   useColorMode,
@@ -28,15 +30,15 @@ import {
   Center,
   useColorModeValue,
   NativeBaseProvider,
-} from 'native-base';
+} from "native-base";
 
 function ColorModeExample() {
   const { colorMode, toggleColorMode } = useColorMode();
   return (
     <>
       <Heading>I'm a Heading</Heading>
       <Button
-        colorScheme={colorMode === 'light' ? 'blue' : 'red'}
+        colorScheme={colorMode === "light" ? "blue" : "red"}
         onPress={() => {
           toggleColorMode();
         }}
@@ -48,14 +50,14 @@ function ColorModeExample() {
           name="Ankur"
           borderWidth={2}
           source={{
-            uri: 'https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg',
+            uri: "https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg",
           }}
         />
         <Avatar
           name="Rohit"
           borderWidth={2}
           source={{
-            uri: 'https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg',
+            uri: "https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg",
           }}
         />
       </HStack>
@@ -64,7 +66,7 @@ function ColorModeExample() {
 }
 
 const LocalWrapper = ({ children }) => {
-  const bg = useColorModeValue('gray.200', 'gray.800');
+  const bg = useColorModeValue("gray.200", "gray.800");
   return (
     <Center flex={1} bg={bg}>
       {children}
@@ -88,12 +90,12 @@ export function Example() {
 You can set default color mode. By default, the color mode will be `light`. To support this, extend the default theme with a `config`
 
 ```jsx
-import { NativeBaseProvider, extendTheme, Text } from 'native-base';
+import { NativeBaseProvider, extendTheme, Text } from "native-base";
 
 // Define the config
 const config = {
   useSystemColorMode: false,
-  initialColorMode: 'dark',
+  initialColorMode: "dark",
 };
 
 // extend the theme
@@ -115,24 +117,24 @@ You can persist the color mode in you app by defining you color mode manager of
 - For Native
 
 ```jsx
-import React from 'react';
-import { NativeBaseProvider, StorageManager, ColorMode } from 'native-base';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import React from "react";
+import { NativeBaseProvider, StorageManager, ColorMode } from "native-base";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 // Define the colorModeManager,
 // here we are using react-native-async-storage (https://react-native-async-storage.github.io/async-storage/)
 const colorModeManager: StorageManager = {
   get: async () => {
     try {
-      let val = await AsyncStorage.getItem('@color-mode');
-      return val === 'dark' ? 'dark' : 'light';
+      let val = await AsyncStorage.getItem("@color-mode");
+      return val === "dark" ? "dark" : "light";
     } catch (e) {
-      return 'light';
+      return "light";
     }
   },
   set: async (value: ColorMode) => {
     try {
-      await AsyncStorage.setItem('@color-mode', value);
+      await AsyncStorage.setItem("@color-mode", value);
     } catch (e) {
       console.log(e);
     }
@@ -151,16 +153,16 @@ export default function () {
 - For web
 
 ```jsx
-import React from 'react';
-import { ColorMode, NativeBaseProvider, StorageManager } from 'native-base';
+import React from "react";
+import { ColorMode, NativeBaseProvider, StorageManager } from "native-base";
 const colorModeManager: StorageManager = {
   get: async () => {
-    let val = localStorage.getItem('@color-mode');
-    return val === 'dark' ? 'dark' : 'light';
+    let val = localStorage.getItem("@color-mode");
+    return val === "dark" ? "dark" : "light";
   },
   set: async (value: ColorMode) => {
-    let strValue = value ? value.toString() : '';
-    localStorage.setItem('@color-mode', strValue);
+    let strValue = value ? value.toString() : "";
+    localStorage.setItem("@color-mode", strValue);
   },
 };
 

docs/3.2.x/color-mode.md

@@ -1,6 +1,8 @@
 ---
 id: color-mode
 title: Color mode (Dark Mode)
+metaTitle: Color mode (Dark Mode) | NativeBase
+metaDescription: The NativeBaseProvider at the root of your app to automatically uses color mode. useColorMode or useColorModeValue hooks handle color mode manually.
 ---
 
 When you use the `NativebaseProvider` at the root of your app, you can automatically use color mode in your apps.
@@ -21,12 +23,12 @@ Calling toggleColorMode anywhere in your app tree toggles the color mode.
 
 ```
 
-## _light and _dark Pseudo props
+## \_light and \_dark Pseudo props
 
 All components accepts \_light and \_dark props which applies the passed props on dark and light mode.
 
 ```jsx isLive
-import React from 'react';
+import React from "react";
 import {
   Heading,
   useColorMode,
@@ -37,18 +39,18 @@ import {
   useColorModeValue,
   Text,
   NativeBaseProvider,
-} from 'native-base';
+} from "native-base";
 
 function PseudoPropsUsage() {
   const { colorMode, toggleColorMode } = useColorMode();
   return (
     <Center
       flex={1}
-      _dark={{ bg: 'coolGray.800' }}
-      _light={{ bg: 'warmGray.50' }}
+      _dark={{ bg: "coolGray.800" }}
+      _light={{ bg: "warmGray.50" }}
     >
       <Text fontSize="lg" display="flex" mb="20">
-        The active color mode is{' '}
+        The active color mode is{" "}
         <Text bold fontSize="lg">
           {colorMode}
         </Text>
@@ -72,12 +74,12 @@ export function Example() {
 You can set default color mode. By default, the color mode will be `light`. To support this, extend the default theme with a `config`
 
 ```jsx
-import { NativeBaseProvider, extendTheme, Text } from 'native-base';
+import { NativeBaseProvider, extendTheme, Text } from "native-base";
 
 // Define the config
 const config = {
   useSystemColorMode: false,
-  initialColorMode: 'dark',
+  initialColorMode: "dark",
 };
 
 // extend the theme
@@ -99,24 +101,24 @@ You can persist the color mode in you app by defining you color mode manager of
 - For Native
 
 ```jsx
-import React from 'react';
-import { NativeBaseProvider, StorageManager, ColorMode } from 'native-base';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import React from "react";
+import { NativeBaseProvider, StorageManager, ColorMode } from "native-base";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 // Define the colorModeManager,
 // here we are using react-native-async-storage (https://react-native-async-storage.github.io/async-storage/)
 const colorModeManager: StorageManager = {
   get: async () => {
     try {
-      let val = await AsyncStorage.getItem('@color-mode');
-      return val === 'dark' ? 'dark' : 'light';
+      let val = await AsyncStorage.getItem("@color-mode");
+      return val === "dark" ? "dark" : "light";
     } catch (e) {
-      return 'light';
+      return "light";
     }
   },
   set: async (value: ColorMode) => {
     try {
-      await AsyncStorage.setItem('@color-mode', value);
+      await AsyncStorage.setItem("@color-mode", value);
     } catch (e) {
       console.log(e);
     }
@@ -135,16 +137,16 @@ export default function () {
 - For web
 
 ```jsx
-import React from 'react';
-import { ColorMode, NativeBaseProvider, StorageManager } from 'native-base';
+import React from "react";
+import { ColorMode, NativeBaseProvider, StorageManager } from "native-base";
 const colorModeManager: StorageManager = {
   get: async () => {
-    let val = localStorage.getItem('@color-mode');
-    return val === 'dark' ? 'dark' : 'light';
+    let val = localStorage.getItem("@color-mode");
+    return val === "dark" ? "dark" : "light";
   },
   set: async (value: ColorMode) => {
-    let strValue = value ? value.toString() : '';
-    localStorage.setItem('@color-mode', strValue);
+    let strValue = value ? value.toString() : "";
+    localStorage.setItem("@color-mode", strValue);
   },
 };