diff --git a/docs/customization/variables.mdx b/docs/customization/variables.mdx
index 5f798ba2f9..8fd181030f 100644
--- a/docs/customization/variables.mdx
+++ b/docs/customization/variables.mdx
@@ -157,7 +157,7 @@ In the following example, the primary color is set to red and the text color is
             appearance={{
               variables: {
                 colorPrimary: 'purple',
-                colorText: 'white',
+                colorText: 'black',
               },
             }}
           >
@@ -179,7 +179,7 @@ In the following example, the primary color is set to red and the text color is
             appearance={{
               variables: {
                 colorPrimary: 'purple',
-                colorText: 'white',
+                colorText: 'black',
               },
             }}
           >
@@ -210,7 +210,7 @@ In the following example, the primary color is set to red and the text color is
           appearance={{
             variables: {
               colorPrimary: 'purple',
-              colorText: 'white',
+              colorText: 'black',
             },
           }}
           publishableKey={clerkPubKey}
@@ -263,7 +263,7 @@ In the following example, the primary color is set to red and the text color is
       appearance: {
         variables: {
           colorPrimary: 'red',
-          colorText: 'white',
+          colorText: 'black',
         },
       },
     })
@@ -280,7 +280,7 @@ In the following example, the primary color is set to red and the text color is
           appearance: {
             variables: {
               colorPrimary: 'red',
-              colorText: 'white',
+              colorText: 'black',
             },
           },
         }),
@@ -309,7 +309,7 @@ In the following example, the primary color is set to red and the text color is
               signIn: {
                 variables: {
                   colorPrimary: 'purple',
-                  colorText: 'white',
+                  colorText: 'black',
                 },
               },
             }}
@@ -333,7 +333,7 @@ In the following example, the primary color is set to red and the text color is
               signIn: {
                 variables: {
                   colorPrimary: 'purple',
-                  colorText: 'white',
+                  colorText: 'black',
                 },
               },
             }}
@@ -366,7 +366,7 @@ In the following example, the primary color is set to red and the text color is
             signIn: {
               variables: {
                 colorPrimary: 'purple',
-                colorText: 'white',
+                colorText: 'black',
               },
             },
           }}
@@ -421,7 +421,7 @@ In the following example, the primary color is set to red and the text color is
         signIn: {
           variables: {
             colorPrimary: 'red',
-            colorText: 'white',
+            colorText: 'black',
           },
         },
       },
@@ -440,7 +440,7 @@ In the following example, the primary color is set to red and the text color is
             signIn: {
               variables: {
                 colorPrimary: 'red',
-                colorText: 'white',
+                colorText: 'black',
               },
             },
           },
@@ -469,7 +469,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
             appearance={{
               variables: {
                 colorPrimary: 'purple',
-                colorText: 'white',
+                colorText: 'black',
               },
             }}
           />
@@ -485,7 +485,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
           appearance={{
             variables: {
               colorPrimary: 'purple',
-              colorText: 'white',
+              colorText: 'black',
             },
           }}
         />
@@ -505,7 +505,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
         appearance={{
           variables: {
             colorPrimary: 'purple',
-            colorText: 'white',
+            colorText: 'black',
           },
         }}
         path="/sign-in"
@@ -528,7 +528,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
             appearance={{
               variables: {
                 colorPrimary: 'purple',
-                colorText: 'white',
+                colorText: 'black',
               },
             }}
           />
@@ -548,7 +548,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
       path="/sign-in"
       appearance={{
         colorPrimary: 'purple',
-        colorText: 'white',
+        colorText: 'black',
       }}
     />
     ```