SuperStarter 使用了 shadcn/ui 提供的 CSS 变量。它们是解决 深色模式 和白标相关的扩展和维护难题的绝佳方式。

这些颜色也被应用到其他工具中，例如 AuthProvider，以确保第三方组件尽可能与应用程序设计保持一致。

​
使用

所有默认页面和组件都使用这些颜色。您也可以在自己的组件中使用它们，如下所示：

export const MyComponent = () => (
  <div className="bg-background text-foreground border rounded-4xl shadow">
    <p>我正在使用 CSS 变量！</p>
  </div>
);

您也可以通过从 @repo/tailwind-config 导出的 tailwind 工具在 JavaScript 中访问颜色，如下所示：

component.tsx
import { tailwind } from '@repo/tailwind-config';

export const MyComponent = () => (
  <div style={{
    background: tailwind.theme.colors.background,
    color: tailwind.theme.colors.muted.foreground,
  }}>
    <p>我正在直接从 Tailwind 配置中使用样式！</p>
  </div>
);

​
注意事项

目前，无法将 Clerk 主题更改为与应用程序的精确主题匹配。这是因为 Clerk 的主题不接受自定义 CSS 变量。我们希望将来能够添加以下内容：

packages/design-system/providers/clerk.tsx
const variables: Theme['variables'] = {
  // ...

  colorBackground: 'hsl(var(--background))',
  colorPrimary: 'hsl(var(--primary))',
  colorDanger: 'hsl(var(--destructive))',
  colorInputBackground: 'hsl(var(--transparent))',
  colorInputText: 'hsl(var(--text-foreground))',
  colorNeutral: 'hsl(var(--neutral))',
  colorShimmer: 'hsl(var(--primary) / 10%)',
  colorSuccess: 'hsl(var(--success))',
  colorText: 'hsl(var(--text-foreground))',
  colorTextOnPrimaryBackground: 'hsl(var(--text-foreground))',
  colorTextSecondary: 'hsl(var(--text-muted-foreground))',
  colorWarning: 'hsl(var(--warning))',
};