Choose a color scheme for your website.
You can visit theme-generator to get a real-time preview.
- Config different colors for light and dark mode.
- Real-time preview of theme effects.
- Auto generate theme via a primary color.
- Support exporting as CSS variables, UnoCSS or TailwindCSS config.
- Color tokens for different UI frameworks adaptation. (WIP)
- Provide API usage.
[!WARNING] The API is still unstable and may have breaking change in the future.
npm i @bernankez/theme-generator
In your project
import { defaultColors, defineTheme } from "@bernankez/theme-generator";
const theme = defineTheme({
defaults: defaultColors
});
console.log(theme);
// {
// colors: {
// background: {
// light: "#ffffff",
// dark: "#0a0a0a",
// },
// foreground: {
// light: "#0a0a0a",
// dark: "#fafafa",
// },
// primary: {
// light: "#171717",
// dark: "#fafafa",
// },
// primaryForeground: {
// light: "#fafafa",
// dark: "#171717",
// },
// secondary: {
// light: "#f5f5f5",
// dark: "#262626",
// },
// secondaryForeground: {
// light: "#171717",
// dark: "#fafafa",
// },
// accent: {
// light: "#f5f5f5",
// dark: "#262626",
// },
// accentForeground: {
// light: "#171717",
// dark: "#fafafa",
// },
// muted: {
// light: "#f5f5f5",
// dark: "#262626",
// },
// mutedForeground: {
// light: "#737373",
// dark: "#fafafa",
// },
// border: "#e5e7eb",
// info: "#00b3f0",
// infoForeground: "#ffffff",
// success: "#00a96f",
// successForeground: "#ffffff",
// warning: "#ffc22d",
// warningForeground: "#000000",
// error: "#ff6f70",
// errorForeground: "#ffffff",
// },
// radius: "0.5rem",
// }
defaultColors
is the Neutral
theme of shadcn
, you can also pass your own color variables, and the remaining variables will be merged with defaultColors
. The values in overrides
have a higher priority than those in defaults
.
The function of defining themes. You can pass in your own color variables, or use the built-in defaultColors
as defaults. You can also use inferThemeFromColor
below to generate a theme as defaults
.
export declare function defineTheme(options: DefineThemeOptions): Theme;
export interface DefineThemeOptions {
defaults: AcceptableTheme;
overrides?: Partial<AcceptableTheme>;
}
export type AcceptableTheme = {
colors: Partial<Record<ColorKeywords, Color | string>>;
} & {
[key in ShapeKeywords]?: string
};
export type Theme = {
colors: Record<ColorKeywords, Color>;
} & {
[key in ShapeKeywords]: string;
};
Auto generate a theme from a primary color.
export declare function inferThemeFromColor(themeColor: string): Theme;
@bernankez/theme-generator
adapts to different UI frameworks through presets. It currently exports presetNone
and presetShadcn
. You can adapt your own UI framework through preset.
export declare function presetNone(theme: Theme, options?: PresetNoneOptions): { theme: Theme; style: { light: Record<string, string>; dark: Record<string, string> }; unocss: Theme; tailwind: TailwindTheme };
export interface PresetNoneOptions {
cssPrefix?: string;
}
export declare function presetShadcn(theme: Theme, options?: PresetShadcnOptions): { theme: ShadcnTheme; style: { light: Record<string, string>; dark: Record<string, string> }; unocss: Theme; tailwind: TailwindTheme };
export interface PresetShadcnOptions {
cssPrefix?: string;
}
This project is inspired by