GeekyAnts · rayan1810 · Aug 22, 2022 · Aug 2, 2022 · Aug 2, 2022 · Aug 3, 2022
diff --git a/docs/3.0.x/kitchen-sink.mdx b/docs/3.0.x/kitchen-sink.mdx
@@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
 <Box>
   <Box m="0">
     <Box p="0" mb="12">
-      <Box>
+      <Box
+        _text={{ fontSize: "md" }}
+        _dark={{ _text: { color: "coolGray.400" } }}
+        _light={{ _text: { color: "coolGray.700" } }}
+      >
         Kitchen Sink is a comprehensive demo app showcasing all the NativeBase
         components in action. It includes buttons, forms, icons and much more!
       </Box>
@@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
         direction={{ base: "column", md: "row" }}
       >
         <Box w={{ base: "100%", md: "75%" }}>
-          <Text>
+          <Text
+            fontSize="md"
+            _dark={{ color: "coolGray.400" }}
+            _light={{ color: "coolGray.700" }}
+          >
             <Text>Scan with the </Text>
-            <Image alt="expo icon" mb="-1" size="5" source={{ uri: "/img/expo-icon.svg" }} />
+            <Image
+              alt="expo icon"
+              mb="-1"
+              size="5"
+              source={{ uri: "/img/expo-icon.svg" }}
+            />
             <Text>
               {" "}
               Expo app on your Android device to see the special dish we cooked for

diff --git a/docs/3.0.x/migration/action-sheet.md b/docs/3.0.x/migration/action-sheet.md
@@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh
 Migrating Checkbox components can broadly described in these points:
 
 - **options** (prop) → `Actionsheet.Item` (component).
-- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
+- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
 - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title.
 - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`.
 
@@ -25,16 +25,16 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   Container,
   Header,
   Button,
   Content,
   ActionSheet,
   Text,
-} from 'native-base';
-var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel'];
+} from "native-base";
+var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"];
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 export default class ActionSheetExample extends Component {
@@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component {
                   options: BUTTONS,
                   cancelButtonIndex: CANCEL_INDEX,
                   destructiveButtonIndex: DESTRUCTIVE_INDEX,
-                  title: 'Header',
+                  title: "Header",
                 },
                 (buttonIndex) => {
                   this.setState({ clicked: BUTTONS[buttonIndex] });
@@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Button, Actionsheet, useDisclose } from 'native-base';
+import React from "react";
+import { Button, Actionsheet, useDisclose } from "native-base";
 
 export default function () {
   const { isOpen, onOpen, onClose } = useDisclose();

diff --git a/docs/3.0.x/migration/button.md b/docs/3.0.x/migration/button.md
@@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points:
 - Colors of the Buttons:
   In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props.
 - Design of the Button:
-  With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
+  With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
 - Sizes of the Button:
   In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values.
 

diff --git a/docs/3.0.x/migration/fab.md b/docs/3.0.x/migration/fab.md
@@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co
 
 ## Overview
 
-Migrating Badge components can broadly described in these points:
+Migrating Fab components can broadly described in these points:
 
 - Instead of Passing Icon as child, use `icon` prop.
 
@@ -17,16 +17,16 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
-import { Container, Header, View, Icon, Fab } from 'native-base';
+import React, { Component } from "react";
+import { Container, Header, View, Icon, Fab } from "native-base";
 export default function () {
   return (
     <Container>
       <Header />
       <View style={{ flex: 1 }}>
         <Fab
           direction="up"
-          style={{ backgroundColor: '#5067FF' }}
+          style={{ backgroundColor: "#5067FF" }}
           position="bottomRight"
         >
           <Icon name="share" />
@@ -41,8 +41,8 @@ export default function () {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Fab, Icon } from 'native-base';
+import React from "react";
+import { Fab, Icon } from "native-base";
 
 export default function () {
   return (

diff --git a/docs/3.1.x/kitchen-sink.mdx b/docs/3.1.x/kitchen-sink.mdx
@@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
 <Box>
   <Box m="0">
     <Box p="0" mb="12">
-      <Box>
+      <Box
+        _text={{ fontSize: "md" }}
+        _dark={{ _text: { color: "coolGray.400" } }}
+        _light={{ _text: { color: "coolGray.700" } }}
+      >
         Kitchen Sink is a comprehensive demo app showcasing all the NativeBase
         components in action. It includes buttons, forms, icons and much more!
       </Box>
@@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
         direction={{ base: "column", md: "row" }}
       >
         <Box w={{ base: "100%", md: "75%" }}>
-          <Text>
+          <Text
+            fontSize="md"
+            _dark={{ color: "coolGray.400" }}
+            _light={{ color: "coolGray.700" }}
+          >
             <Text>Scan with the </Text>
-            <Image alt="expo icon" mb="-1" size="5" source={{ uri: "/img/expo-icon.svg" }} />
+            <Image
+              alt="expo icon"
+              mb="-1"
+              size="5"
+              source={{ uri: "/img/expo-icon.svg" }}
+            />
             <Text>
               {" "}
               Expo app on your Android device to see the special dish we cooked for

diff --git a/docs/3.1.x/migration/action-sheet.md b/docs/3.1.x/migration/action-sheet.md
@@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh
 Migrating Checkbox components can broadly described in these points:
 
 - **options** (prop) → `Actionsheet.Item` (component).
-- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
+- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
 - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title.
 - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`.
 
@@ -25,16 +25,16 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   Container,
   Header,
   Button,
   Content,
   ActionSheet,
   Text,
-} from 'native-base';
-var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel'];
+} from "native-base";
+var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"];
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 export default class ActionSheetExample extends Component {
@@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component {
                   options: BUTTONS,
                   cancelButtonIndex: CANCEL_INDEX,
                   destructiveButtonIndex: DESTRUCTIVE_INDEX,
-                  title: 'Header',
+                  title: "Header",
                 },
                 (buttonIndex) => {
                   this.setState({ clicked: BUTTONS[buttonIndex] });
@@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Button, Actionsheet, useDisclose } from 'native-base';
+import React from "react";
+import { Button, Actionsheet, useDisclose } from "native-base";
 
 export default function () {
   const { isOpen, onOpen, onClose } = useDisclose();

diff --git a/docs/3.1.x/migration/button.md b/docs/3.1.x/migration/button.md
@@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points:
 - Colors of the Buttons:
   In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props.
 - Design of the Button:
-  With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
+  With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
 - Sizes of the Button:
   In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values.
 

diff --git a/docs/3.1.x/migration/fab.md b/docs/3.1.x/migration/fab.md
@@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co
 
 ## Overview
 
-Migrating Badge components can broadly described in these points:
+Migrating Fab components can broadly described in these points:
 
 - Instead of Passing Icon as child, use `icon` prop.
 
@@ -17,16 +17,16 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
-import { Container, Header, View, Icon, Fab } from 'native-base';
+import React, { Component } from "react";
+import { Container, Header, View, Icon, Fab } from "native-base";
 export default function () {
   return (
     <Container>
       <Header />
       <View style={{ flex: 1 }}>
         <Fab
           direction="up"
-          style={{ backgroundColor: '#5067FF' }}
+          style={{ backgroundColor: "#5067FF" }}
           position="bottomRight"
         >
           <Icon name="share" />
@@ -41,8 +41,8 @@ export default function () {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Fab, Icon } from 'native-base';
+import React from "react";
+import { Fab, Icon } from "native-base";
 
 export default function () {
   return (

diff --git a/docs/3.2.x/building-search-bar.md b/docs/3.2.x/building-search-bar.md
@@ -13,7 +13,7 @@ Here are some examples to show how easily and quickly we can create so many type
 ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png) -->
 
 ```jsx isLive
-import React from 'react';
+import React from "react";
 import {
   VStack,
   Input,
@@ -26,9 +26,9 @@ import {
   Box,
   Divider,
   Heading,
-} from 'native-base';
-import { Ionicons, MaterialIcons } from '@expo/vector-icons';
-import { FontAwesome5 } from '@expo/vector-icons';
+} from "native-base";
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { FontAwesome5 } from "@expo/vector-icons";
 
 function SearchBar() {
   return (
@@ -52,10 +52,9 @@ function SearchBar() {
           py="1"
           px="2"
           placeholderTextColor="gray.500"
-          _hover={{ bg: 'gray.200', borderWidth: 0 }}
-          borderWidth="0"
+          _hover={{ bg: "gray.200", borderWidth: 0 }}
           _web={{
-            _focus: { style: { boxShadow: 'none' } },
+            _focus: { style: { boxShadow: "none" } },
           }}
           InputLeftElement={
             <Icon
@@ -79,7 +78,7 @@ function SearchBar() {
           px="1"
           fontSize="14"
           _web={{
-            _focus: { borderColor: 'muted.300', style: { boxShadow: 'none' } },
+            _focus: { borderColor: "muted.300", style: { boxShadow: "none" } },
           }}
           InputLeftElement={
             <Icon

diff --git a/docs/3.2.x/kitchen-sink.mdx b/docs/3.2.x/kitchen-sink.mdx
@@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
 <Box>
   <Box m="0">
     <Box p="0" mb="12">
-      <Box>
+      <Box
+        _text={{ fontSize: "md" }}
+        _dark={{ _text: { color: "coolGray.400" } }}
+        _light={{ _text: { color: "coolGray.700" } }}
+      >
         Kitchen Sink is a comprehensive demo app showcasing all the NativeBase
         components in action. It includes buttons, forms, icons and much more!
       </Box>
@@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
         direction={{ base: "column", md: "row" }}
       >
         <Box w={{ base: "100%", md: "75%" }}>
-          <Text>
+          <Text
+            fontSize="md"
+            _dark={{ color: "coolGray.400" }}
+            _light={{ color: "coolGray.700" }}
+          >
             <Text>Scan with the </Text>
-            <Image alt="expo icon" mb="-1" size="5" source={{ uri: "/img/expo-icon.svg" }} />
+            <Image
+              alt="expo icon"
+              mb="-1"
+              size="5"
+              source={{ uri: "/img/expo-icon.svg" }}
+            />
             <Text>
               {" "}
               Expo app on your Android device to see the special dish we cooked for

diff --git a/docs/3.2.x/migration/action-sheet.md b/docs/3.2.x/migration/action-sheet.md
@@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh
 Migrating Checkbox components can broadly described in these points:
 
 - **options** (prop) → `Actionsheet.Item` (component).
-- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
+- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
 - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title.
 - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`.
 
@@ -25,16 +25,16 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   Container,
   Header,
   Button,
   Content,
   ActionSheet,
   Text,
-} from 'native-base';
-var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel'];
+} from "native-base";
+var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"];
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 export default class ActionSheetExample extends Component {
@@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component {
                   options: BUTTONS,
                   cancelButtonIndex: CANCEL_INDEX,
                   destructiveButtonIndex: DESTRUCTIVE_INDEX,
-                  title: 'Header',
+                  title: "Header",
                 },
                 (buttonIndex) => {
                   this.setState({ clicked: BUTTONS[buttonIndex] });
@@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Button, Actionsheet, useDisclose } from 'native-base';
+import React from "react";
+import { Button, Actionsheet, useDisclose } from "native-base";
 
 export default function () {
   const { isOpen, onOpen, onClose } = useDisclose();

diff --git a/docs/3.2.x/migration/button.md b/docs/3.2.x/migration/button.md
@@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points:
 - Colors of the Buttons:
   In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props.
 - Design of the Button:
-  With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
+  With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
 - Sizes of the Button:
   In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values.