Colors
CSS variables and how they work
next-forge makes use of the CSS variables offered by shadcn/ui. They're a brilliant way of abstracting the scaling and maintenance difficulties associated with Dark Mode and whitelabelling.
These colors have also been applied to other tools, such as the AuthProvider, to ensure that third-party components align with the application design as closely as possible.
Usage
All default pages and components use these colors. You can also use them in your own components, like so:
export const MyComponent = () => (
<div className="bg-background text-foreground border rounded-4xl shadow">
<p>I'm using CSS Variables!</p>
</div>
);You can also access colors in JavaScript through the tailwind utility exported from @repo/tailwind-config, like so:
import { tailwind } from '@repo/tailwind-config';
export const MyComponent = () => (
<div style={{
background: tailwind.theme.colors.background,
color: tailwind.theme.colors.muted.foreground,
}}>
<p>I'm using styles directly from the Tailwind config!</p>
</div>
);Caveats
Currently, it's not possible to change the Clerk theme to match the exact theme of the app. This is because Clerk's Theme doesn't accept custom CSS variables. We'd like to be able to add the following in the future:
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))',
};