Skip to content

Commit c0421f8

Browse files
SarahSoutoulSarahSoutoul
authored
Replace baseTheme with theme (#2742)
1 parent b67a091 commit c0421f8

File tree

4 files changed

+55
-55
lines changed

4 files changed

+55
-55
lines changed

‎docs/guides/customizing-clerk/appearance-prop/overview.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ This applies to all of the React-based packages, like [Next.js](/docs/nextjs/get
1616
The `appearance` prop accepts the following properties:
1717

1818
<Properties>
19-
- `baseTheme?`
19+
- `theme?`
2020
- `BaseTheme | BaseTheme[]`
2121

2222
A theme used as the base theme for the components. For more information, see [Themes](/docs/guides/customizing-clerk/appearance-prop/themes).

‎docs/guides/customizing-clerk/appearance-prop/themes.mdx‎

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ To use the simple theme, set `theme` to `simple`:
106106

107107
### Apply a theme to all Clerk components
108108

109-
To apply a theme to all Clerk components, pass the `appearance` prop to the [`<ClerkProvider>`](/docs/reference/components/clerk-provider) component. The `appearance` prop accepts the property `baseTheme`, which can be set to a theme.
109+
To apply a theme to all Clerk components, pass the `appearance` prop to the [`<ClerkProvider>`](/docs/reference/components/clerk-provider) component. The `appearance` prop accepts the property `theme`, which can be set to a theme.
110110

111111
In the following example, the "Dark" theme is applied to all Clerk components.
112112

@@ -121,7 +121,7 @@ In the following example, the "Dark" theme is applied to all Clerk components.
121121
return (
122122
<ClerkProvider
123123
appearance={{
124-
baseTheme: dark,
124+
theme: dark,
125125
}}
126126
>
127127
<html lang="en">
@@ -141,7 +141,7 @@ In the following example, the "Dark" theme is applied to all Clerk components.
141141
return (
142142
<ClerkProvider
143143
appearance={{
144-
baseTheme: dark,
144+
theme: dark,
145145
}}
146146
>
147147
<Component {...pageProps} />
@@ -170,7 +170,7 @@ In the following example, the "Dark" theme is applied to all Clerk components.
170170
return (
171171
<ClerkProvider
172172
appearance={{
173-
baseTheme: dark,
173+
theme: dark,
174174
}}
175175
publishableKey={clerkPubKey}
176176
>
@@ -192,7 +192,7 @@ In the following example, the "Dark" theme is applied to all Clerk components.
192192
integrations: [
193193
clerk({
194194
appearance: {
195-
baseTheme: dark,
195+
theme: dark,
196196
},
197197
}),
198198
],
@@ -238,7 +238,7 @@ In the following example, the "Dark" theme is applied to all Clerk components.
238238

239239
export default ClerkApp(App, {
240240
appearance: {
241-
baseTheme: dark,
241+
theme: dark,
242242
},
243243
})
244244
```
@@ -254,7 +254,7 @@ In the following example, the "Dark" theme is applied to all Clerk components.
254254
const app = createApp(App)
255255
app.use(clerkPlugin, {
256256
appearance: {
257-
baseTheme: dark,
257+
theme: dark,
258258
},
259259
})
260260
app.mount('#app')
@@ -269,7 +269,7 @@ In the following example, the "Dark" theme is applied to all Clerk components.
269269
modules: ['@clerk/nuxt'],
270270
clerk: {
271271
appearance: {
272-
baseTheme: dark,
272+
theme: dark,
273273
},
274274
},
275275
})
@@ -279,7 +279,7 @@ In the following example, the "Dark" theme is applied to all Clerk components.
279279

280280
### Apply multiple themes
281281

282-
You can also stack themes by passing an array of themes to the `baseTheme` property of the `appearance` prop. The themes will be applied in the order they are listed. If styles overlap, the last defined theme will take precedence.
282+
You can also stack themes by passing an array of themes to the `theme` property of the `appearance` prop. The themes will be applied in the order they are listed. If styles overlap, the last defined theme will take precedence.
283283

284284
In the following example, the "Dark" theme is applied first, then the "Neobrutalism" theme is applied on top of it.
285285

@@ -294,7 +294,7 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal
294294
return (
295295
<ClerkProvider
296296
appearance={{
297-
baseTheme: [dark, neobrutalism],
297+
theme: [dark, neobrutalism],
298298
}}
299299
>
300300
<html lang="en">
@@ -314,7 +314,7 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal
314314
return (
315315
<ClerkProvider
316316
appearance={{
317-
baseTheme: [dark, neobrutalism],
317+
theme: [dark, neobrutalism],
318318
}}
319319
>
320320
<Component {...pageProps} />
@@ -343,7 +343,7 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal
343343
return (
344344
<ClerkProvider
345345
appearance={{
346-
baseTheme: [dark, neobrutalism],
346+
theme: [dark, neobrutalism],
347347
}}
348348
publishableKey={clerkPubKey}
349349
>
@@ -365,7 +365,7 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal
365365
integrations: [
366366
clerk({
367367
appearance: {
368-
baseTheme: [dark, neobrutalism],
368+
theme: [dark, neobrutalism],
369369
},
370370
}),
371371
],
@@ -411,7 +411,7 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal
411411

412412
export default ClerkApp(App, {
413413
appearance: {
414-
baseTheme: [dark, neobrutalism],
414+
theme: [dark, neobrutalism],
415415
},
416416
})
417417
```
@@ -427,7 +427,7 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal
427427
const app = createApp(App)
428428
app.use(clerkPlugin, {
429429
appearance: {
430-
baseTheme: [dark, neobrutalism],
430+
theme: [dark, neobrutalism],
431431
},
432432
})
433433
app.mount('#app')
@@ -442,7 +442,7 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal
442442
modules: ['@clerk/nuxt'],
443443
clerk: {
444444
appearance: {
445-
baseTheme: [dark, neobrutalism],
445+
theme: [dark, neobrutalism],
446446
},
447447
},
448448
})
@@ -467,8 +467,8 @@ In the following example, the "Neobrutalism" theme is applied to all instances o
467467
return (
468468
<ClerkProvider
469469
appearance={{
470-
baseTheme: dark,
471-
signIn: { baseTheme: neobrutalism },
470+
theme: dark,
471+
signIn: { theme: neobrutalism },
472472
}}
473473
>
474474
<html lang="en">
@@ -488,8 +488,8 @@ In the following example, the "Neobrutalism" theme is applied to all instances o
488488
return (
489489
<ClerkProvider
490490
appearance={{
491-
baseTheme: dark,
492-
signIn: { baseTheme: neobrutalism },
491+
theme: dark,
492+
signIn: { theme: neobrutalism },
493493
}}
494494
>
495495
<Component {...pageProps} />
@@ -518,8 +518,8 @@ In the following example, the "Neobrutalism" theme is applied to all instances o
518518
return (
519519
<ClerkProvider
520520
appearance={{
521-
baseTheme: dark,
522-
signIn: { baseTheme: neobrutalism },
521+
theme: dark,
522+
signIn: { theme: neobrutalism },
523523
}}
524524
publishableKey={clerkPubKey}
525525
>
@@ -541,8 +541,8 @@ In the following example, the "Neobrutalism" theme is applied to all instances o
541541
integrations: [
542542
clerk({
543543
appearance: {
544-
baseTheme: dark,
545-
signIn: { baseTheme: neobrutalism },
544+
theme: dark,
545+
signIn: { theme: neobrutalism },
546546
},
547547
}),
548548
],
@@ -588,8 +588,8 @@ In the following example, the "Neobrutalism" theme is applied to all instances o
588588

589589
export default ClerkApp(App, {
590590
appearance: {
591-
baseTheme: dark,
592-
signIn: { baseTheme: neobrutalism },
591+
theme: dark,
592+
signIn: { theme: neobrutalism },
593593
},
594594
})
595595
```
@@ -605,8 +605,8 @@ In the following example, the "Neobrutalism" theme is applied to all instances o
605605
const app = createApp(App)
606606
app.use(clerkPlugin, {
607607
appearance: {
608-
baseTheme: dark,
609-
signIn: { baseTheme: neobrutalism },
608+
theme: dark,
609+
signIn: { theme: neobrutalism },
610610
},
611611
})
612612
app.mount('#app')
@@ -621,8 +621,8 @@ In the following example, the "Neobrutalism" theme is applied to all instances o
621621
modules: ['@clerk/nuxt'],
622622
clerk: {
623623
appearance: {
624-
baseTheme: dark,
625-
signIn: { baseTheme: neobrutalism },
624+
theme: dark,
625+
signIn: { theme: neobrutalism },
626626
},
627627
},
628628
})
@@ -632,7 +632,7 @@ In the following example, the "Neobrutalism" theme is applied to all instances o
632632

633633
### Apply a theme to a single Clerk component
634634

635-
To apply a theme to a single Clerk component, pass the `appearance` prop to the component. The `appearance` prop accepts the property `baseTheme`, which can be set to a theme.
635+
To apply a theme to a single Clerk component, pass the `appearance` prop to the component. The `appearance` prop accepts the property `theme`, which can be set to a theme.
636636

637637
<Tabs items={["Next.js", "React", "Astro", "Remix", "Vue", "Nuxt"]}>
638638
<Tab>
@@ -645,7 +645,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the
645645
return (
646646
<SignIn
647647
appearance={{
648-
baseTheme: dark,
648+
theme: dark,
649649
}}
650650
/>
651651
)
@@ -659,7 +659,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the
659659
const SignInPage = () => (
660660
<SignIn
661661
appearance={{
662-
baseTheme: dark,
662+
theme: dark,
663663
}}
664664
/>
665665
)
@@ -677,7 +677,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the
677677
const SignInPage = () => (
678678
<SignIn
679679
appearance={{
680-
baseTheme: dark,
680+
theme: dark,
681681
}}
682682
/>
683683
)
@@ -695,7 +695,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the
695695
696696
<SignIn
697697
appearance={{
698-
baseTheme: dark,
698+
theme: dark,
699699
}}
700700
/>
701701
```
@@ -712,7 +712,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the
712712
<h1>Sign In route</h1>
713713
<SignIn
714714
appearance={{
715-
baseTheme: dark,
715+
theme: dark,
716716
}}
717717
/>
718718
</div>
@@ -729,7 +729,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the
729729
</script>
730730
731731
<template>
732-
<SignIn :appearance="{ baseTheme: dark }" />
732+
<SignIn :appearance="{ theme: dark }" />
733733
</template>
734734
```
735735
</Tab>
@@ -742,7 +742,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the
742742
</script>
743743
744744
<template>
745-
<SignIn :appearance="{ baseTheme: dark }" />
745+
<SignIn :appearance="{ theme: dark }" />
746746
</template>
747747
```
748748
</Tab>
@@ -768,10 +768,10 @@ In the following example, the primary color of the themes are customized.
768768
return (
769769
<ClerkProvider
770770
appearance={{
771-
baseTheme: [dark, neobrutalism],
771+
theme: [dark, neobrutalism],
772772
variables: { colorPrimary: 'blue' },
773773
signIn: {
774-
baseTheme: [shadesOfPurple],
774+
theme: [shadesOfPurple],
775775
variables: { colorPrimary: 'green' },
776776
},
777777
}}
@@ -793,10 +793,10 @@ In the following example, the primary color of the themes are customized.
793793
return (
794794
<ClerkProvider
795795
appearance={{
796-
baseTheme: [dark, neobrutalism],
796+
theme: [dark, neobrutalism],
797797
variables: { colorPrimary: 'blue' },
798798
signIn: {
799-
baseTheme: [shadesOfPurple],
799+
theme: [shadesOfPurple],
800800
variables: { colorPrimary: 'blue' },
801801
},
802802
}}
@@ -827,10 +827,10 @@ In the following example, the primary color of the themes are customized.
827827
return (
828828
<ClerkProvider
829829
appearance={{
830-
baseTheme: [dark, neobrutalism],
830+
theme: [dark, neobrutalism],
831831
variables: { colorPrimary: 'blue' },
832832
signIn: {
833-
baseTheme: [shadesOfPurple],
833+
theme: [shadesOfPurple],
834834
variables: { colorPrimary: 'blue' },
835835
},
836836
}}
@@ -854,10 +854,10 @@ In the following example, the primary color of the themes are customized.
854854
integrations: [
855855
clerk({
856856
appearance: {
857-
baseTheme: [dark, neobrutalism],
857+
theme: [dark, neobrutalism],
858858
variables: { colorPrimary: 'blue' },
859859
signIn: {
860-
baseTheme: [shadesOfPurple],
860+
theme: [shadesOfPurple],
861861
variables: { colorPrimary: 'blue' },
862862
},
863863
},
@@ -905,10 +905,10 @@ In the following example, the primary color of the themes are customized.
905905

906906
export default ClerkApp(App, {
907907
appearance: {
908-
baseTheme: [dark, neobrutalism],
908+
theme: [dark, neobrutalism],
909909
variables: { colorPrimary: 'blue' },
910910
signIn: {
911-
baseTheme: [shadesOfPurple],
911+
theme: [shadesOfPurple],
912912
variables: { colorPrimary: 'blue' },
913913
},
914914
},
@@ -926,10 +926,10 @@ In the following example, the primary color of the themes are customized.
926926
const app = createApp(App)
927927
app.use(clerkPlugin, {
928928
appearance: {
929-
baseTheme: [dark, neobrutalism],
929+
theme: [dark, neobrutalism],
930930
variables: { colorPrimary: 'blue' },
931931
signIn: {
932-
baseTheme: [shadesOfPurple],
932+
theme: [shadesOfPurple],
933933
variables: { colorPrimary: 'blue' },
934934
},
935935
},
@@ -946,10 +946,10 @@ In the following example, the primary color of the themes are customized.
946946
modules: ['@clerk/nuxt'],
947947
clerk: {
948948
appearance: {
949-
baseTheme: [dark, neobrutalism],
949+
theme: [dark, neobrutalism],
950950
variables: { colorPrimary: 'blue' },
951951
signIn: {
952-
baseTheme: [shadesOfPurple],
952+
theme: [shadesOfPurple],
953953
variables: { colorPrimary: 'blue' },
954954
},
955955
},

0 commit comments

Comments
 (0)