Skip to content

Commit

Permalink
Change appearance prop examples to not use red as primary color & use…
Browse files Browse the repository at this point in the history
… black as text color (#1537)
  • Loading branch information
victoriaxyz authored Sep 17, 2024
1 parent b3d4fb2 commit 5b0d6cf
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 36 deletions.
12 changes: 6 additions & 6 deletions docs/customization/themes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -604,10 +604,10 @@ In the following example, the primary color of the themes are customized.
<ClerkProvider
appearance={{
baseTheme: [dark, neobrutalism],
variables: { colorPrimary: 'red' },
variables: { colorPrimary: 'blue' },
signIn: {
baseTheme: [shadesOfPurple],
variables: { colorPrimary: 'blue' },
variables: { colorPrimary: 'green' },
},
}}
>
Expand All @@ -629,7 +629,7 @@ In the following example, the primary color of the themes are customized.
<ClerkProvider
appearance={{
baseTheme: [dark, neobrutalism],
variables: { colorPrimary: 'red' },
variables: { colorPrimary: 'blue' },
signIn: {
baseTheme: [shadesOfPurple],
variables: { colorPrimary: 'blue' },
Expand Down Expand Up @@ -663,7 +663,7 @@ In the following example, the primary color of the themes are customized.
<ClerkProvider
appearance={{
baseTheme: [dark, neobrutalism],
variables: { colorPrimary: 'red' },
variables: { colorPrimary: 'blue' },
signIn: {
baseTheme: [shadesOfPurple],
variables: { colorPrimary: 'blue' },
Expand Down Expand Up @@ -719,7 +719,7 @@ In the following example, the primary color of the themes are customized.
export default ClerkApp(App, {
appearance: {
baseTheme: [dark, neobrutalism],
variables: { colorPrimary: 'red' },
variables: { colorPrimary: 'blue' },
signIn: {
baseTheme: [shadesOfPurple],
variables: { colorPrimary: 'blue' },
Expand All @@ -739,7 +739,7 @@ In the following example, the primary color of the themes are customized.
clerk({
appearance: {
baseTheme: [dark, neobrutalism],
variables: { colorPrimary: 'red' },
variables: { colorPrimary: 'blue' },
signIn: {
baseTheme: [shadesOfPurple],
variables: { colorPrimary: 'blue' },
Expand Down
60 changes: 30 additions & 30 deletions docs/customization/variables.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -156,8 +156,8 @@ In the following example, the primary color is set to red and the text color is
<ClerkProvider
appearance={{
variables: {
colorPrimary: 'purple',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
}}
>
Expand All @@ -178,8 +178,8 @@ In the following example, the primary color is set to red and the text color is
<ClerkProvider
appearance={{
variables: {
colorPrimary: 'purple',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
}}
>
Expand Down Expand Up @@ -209,8 +209,8 @@ In the following example, the primary color is set to red and the text color is
<ClerkProvider
appearance={{
variables: {
colorPrimary: 'purple',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
}}
publishableKey={clerkPubKey}
Expand Down Expand Up @@ -262,8 +262,8 @@ In the following example, the primary color is set to red and the text color is
export default ClerkApp(App, {
appearance: {
variables: {
colorPrimary: 'red',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
},
})
Expand All @@ -279,8 +279,8 @@ In the following example, the primary color is set to red and the text color is
clerk({
appearance: {
variables: {
colorPrimary: 'red',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
},
}),
Expand Down Expand Up @@ -308,8 +308,8 @@ In the following example, the primary color is set to red and the text color is
appearance={{
signIn: {
variables: {
colorPrimary: 'purple',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
},
}}
Expand All @@ -332,8 +332,8 @@ In the following example, the primary color is set to red and the text color is
appearance={{
signIn: {
variables: {
colorPrimary: 'purple',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
},
}}
Expand Down Expand Up @@ -365,8 +365,8 @@ In the following example, the primary color is set to red and the text color is
appearance={{
signIn: {
variables: {
colorPrimary: 'purple',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
},
}}
Expand Down Expand Up @@ -420,8 +420,8 @@ In the following example, the primary color is set to red and the text color is
appearance: {
signIn: {
variables: {
colorPrimary: 'red',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
},
},
Expand All @@ -439,8 +439,8 @@ In the following example, the primary color is set to red and the text color is
appearance: {
signIn: {
variables: {
colorPrimary: 'red',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
},
},
Expand Down Expand Up @@ -468,8 +468,8 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
<SignIn
appearance={{
variables: {
colorPrimary: 'purple',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
}}
/>
Expand All @@ -484,8 +484,8 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
<SignIn
appearance={{
variables: {
colorPrimary: 'purple',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
}}
/>
Expand All @@ -504,8 +504,8 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
<SignIn
appearance={{
variables: {
colorPrimary: 'purple',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
}}
path="/sign-in"
Expand All @@ -527,8 +527,8 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
<SignIn
appearance={{
variables: {
colorPrimary: 'purple',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
},
}}
/>
Expand All @@ -547,8 +547,8 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
<SignIn
path="/sign-in"
appearance={{
colorPrimary: 'purple',
colorText: 'white',
colorPrimary: 'blue',
colorText: 'black',
}}
/>
```
Expand Down

0 comments on commit 5b0d6cf

Please sign in to comment.