Next.js中如何为Clerk独立登录页应用预构建主题？

背景 #

我正在跟着Clerk和Next.js的快速入门指南配置认证，Clerk的DX体验确实很棒。

根据Clerk文档，可通过给<ClerkProvider>传递参数来应用预构建主题，我在/app/layout.js中做了如下配置：

// /app/layout.js
<ClerkProvider
  appearance={{
    baseTheme: dark,
    signIn: { baseTheme: neobrutalism },
  }}>
    <html lang='en'> 
       ...
    </html>
</ClerkProvider>

全局基础主题的更改在账户管理等模块生效了，但独立登录页完全没有变化。我希望给独立登录页（至少是登录区域）实现类似“Shades of Purple”主题的视觉效果。

已尝试的操作 #

• 最初仅设置全局baseTheme: dark，独立登录页无任何变化；
• 添加signIn属性单独指定主题，重启本地服务并多次登录登出测试，依旧没有效果；
• 按照文档添加了自定义的SignIn组件页面（路径/app/sign-in/[[...sign-in]]），配置代码如下，但还是无法影响独立登录页：

// /app/sign-in/[[...sign-in]]
import { SignIn } from '@clerk/nextjs';
import { dark } from '@clerk/themes';

export default function Page() {
    return (
        <SignIn
            appearance={{
                baseTheme: dark,
            }}
        />
    );
}

疑问 #

另外注意到baseTheme有两种赋值方式：一种是数组形式，一种是单个值形式，请问哪种方式更推荐，还是两者都可以正常使用？

数组赋值示例：

<ClerkProvider
  appearance={{
    baseTheme: [dark, neobrutalism],
    variables: { colorPrimary: 'red' },
    signIn: { 
      baseTheme: [shadesOfPurple], 
      variables: { colorPrimary: 'blue' }
    }
  }}
>

单个值赋值示例：

<ClerkProvider
  appearance={{
    baseTheme: dark
  }}
>

内容的提问来源于stack exchange，提问作者Octo Palm Tree