Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change appearance prop examples to not use red as primary color & use black as text color #1537

Merged
merged 4 commits into from
Sep 17, 2024
Merged

Change appearance prop examples to not use red as primary color & use black as text color #1537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e3fa03
change text color to black
victoriaxyz Sep 13, 2024
44c2e9b
replace purple and red with blue
victoriaxyz Sep 16, 2024
a67aaf8
Merge branch 'main' into vi/docs-9205/v2
victoriaxyz Sep 16, 2024
bbe18f9
Update docs/customization/themes.mdx
victoriaxyz Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/customization/themes.mdx
View file
Open in desktop
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
View file
Open in desktop
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
Loading