Penguin UI offers various ready-to-use themes. You can use them as they are or customize them with your own styles. Learn how to set up themes.
Main background color
Text on main background color
Strong text on main background color
Alternate background color
Accent color for light mode
Text on primary color
Secondary accent color for light mode
Text on secondary color
Outline Color
Strong outline color
These colors are shared across dark and light modes
Danger or error color
Text on danger color
Informational color
Text on informational color
Warning color
Text on warning color
Success color
Text on success color
Select a color to check its contrast with the rest of the colors in the current theme.
Copy the code below and paste it into your CSS file.
@theme {
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
}@theme {
/* fonts */
--font-title: 'Poppins', sans-serif;
--font-paragraph: 'Inter', sans-serif;
/* light themes */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
@layer base {
[data-theme=arctic] {
/* fonts */
--font-body: 'Inter', sans-serif;
--font-title: 'Inter', sans-serif;
/* light theme */
--color-surface: var(--color-white);
--color-surface-alt: var(--color-slate-100);
--color-on-surface: var(--color-slate-700);
--color-on-surface-strong: var(--color-black);
--color-primary: var(--color-blue-700);
--color-on-primary: var(--color-slate-100);
--color-secondary: var(--color-indigo-700);
--color-on-secondary: var(--color-slate-100);
--color-outline: var(--color-slate-300);
--color-outline-strong: var(--color-slate-800);
/* dark theme */
--color-surface-dark: var(--color-slate-900);
--color-surface-dark-alt: var(--color-slate-800);
--color-on-surface-dark: var(--color-slate-300);
--color-on-surface-dark-strong: var(--color-white);
--color-primary-dark: var(--color-blue-600);
--color-on-primary-dark: var(--color-slate-100);
--color-secondary-dark: var(--color-indigo-600);
--color-on-secondary-dark: var(--color-slate-100);
--color-outline-dark: var(--color-slate-700);
--color-outline-dark-strong: var(--color-slate-300);
/* shared colors */
--color-info: var(--color-sky-600);
--color-on-info: var(--color-white);
--color-success: var(--color-green-600);
--color-on-success: var(--color-white);
--color-warning: var(--color-amber-500);
--color-on-warning: var(--color-white);
--color-danger: var(--color-red-600);
--color-on-danger: var(--color-white);
/* border radius */
--radius-radius: var(--radius-lg);
}
[data-theme=minimal] {
/* fonts */
--font-body: 'Montserrat', sans-serif;
--font-title: 'Montserrat', sans-serif;
/* light theme */
--color-surface: var(--color-white);
--color-surface-alt: var(--color-neutral-100);
--color-on-surface: var(--color-neutral-600);
--color-on-surface-strong: var(--color-neutral-900);
--color-primary: var(--color-black);
--color-on-primary: var(--color-neutral-100);
--color-secondary: var(--color-neutral-800);
--color-on-secondary: var(--color-white);
--color-outline: var(--color-neutral-300);
--color-outline-strong: var(--color-neutral-800);
/* dark theme */
--color-surface-dark: var(--color-neutral-950);
--color-surface-dark-alt: var(--color-neutral-800);
--color-on-surface-dark: var(--color-neutral-400);
--color-on-surface-dark-strong: var(--color-neutral-100);
--color-primary-dark: var(--color-white);
--color-on-primary-dark: var(--color-black);
--color-secondary-dark: var(--color-neutral-300);
--color-on-secondary-dark: var(--color-black);
--color-outline-dark: var(--color-neutral-700);
--color-outline-dark-strong: var(--color-neutral-300);
/* shared colors */
--color-info: var(--color-sky-500);
--color-on-info: var(--color-white);
--color-success: var(--color-green-300);
--color-on-success: var(--color-slate-900);
--color-warning: var(--color-amber-300);
--color-on-warning: var(--color-amber-900);
--color-danger: var(--color-red-500);
--color-on-danger: var(--color-white);
/* border radius */
--radius-radius: var(--radius-none);
}
[data-theme=modern] {
/* fonts */
--font-body: 'Lato', sans-serif;
--font-title: 'Lato', sans-serif;
/* light theme */
--color-surface: var(--color-white);
--color-surface-alt: var(--color-neutral-50);
--color-on-surface: var(--color-neutral-600);
--color-on-surface-strong: var(--color-neutral-900);
--color-primary: var(--color-black);
--color-on-primary: var(--color-neutral-100);
--color-secondary: var(--color-neutral-800);
--color-on-secondary: var(--color-white);
--color-outline: var(--color-neutral-300);
--color-outline-strong: var(--color-neutral-800);
/* dark theme */
--color-surface-dark: var(--color-neutral-950);
--color-surface-dark-alt: var(--color-neutral-900);
--color-on-surface-dark: var(--color-neutral-300);
--color-on-surface-dark-strong: var(--color-white);
--color-primary-dark: var(--color-white);
--color-on-primary-dark: var(--color-black);
--color-secondary-dark: var(--color-neutral-300);
--color-on-secondary-dark: var(--color-black);
--color-outline-dark: var(--color-neutral-700);
--color-outline-dark-strong: var(--color-neutral-300);
/* shared colors */
--color-info: var(--color-sky-500);
--color-on-info: var(--color-white);
--color-success: var(--color-green-500);
--color-on-success: var(--color-white);
--color-warning: var(--color-amber-500);
--color-on-warning: var(--color-white);
--color-danger: var(--color-red-500);
--color-on-danger: var(--color-white);
/* border radius */
--radius-radius: var(--radius-sm);
}
[data-theme=high-contrast] {
/* fonts */
--font-body: 'Inter', sans-serif;
--font-title: 'Inter', sans-serif;
/* light theme */
--color-surface: var(--color-gray-50);
--color-surface-alt: var(--color-gray-200);
--color-on-surface: var(--color-gray-800);
--color-on-surface-strong: var(--color-gray-950);
--color-primary: var(--color-sky-900);
--color-on-primary: var(--color-white);
--color-secondary: var(--color-indigo-900);
--color-on-secondary: var(--color-white);
--color-outline: var(--color-gray-500);
--color-outline-strong: var(--color-gray-900);
/* dark theme */
--color-surface-dark: var(--color-gray-900);
--color-surface-dark-alt: var(--color-gray-800);
--color-on-surface-dark: var(--color-gray-300);
--color-on-surface-dark-strong: var(--color-gray-100);
--color-primary-dark: var(--color-sky-400);
--color-on-primary-dark: var(--color-black);
--color-secondary-dark: var(--color-indigo-400);
--color-on-secondary-dark: var(--color-black);
--color-outline-dark: var(--color-gray-500);
--color-outline-dark-strong: var(--color-gray-300);
/* shared colors */
--color-info: var(--color-sky-500);
--color-on-info: var(--color-black);
--color-success: var(--color-green-500);
--color-on-success: var(--color-black);
--color-warning: var(--color-yellow-500);
--color-on-warning: var(--color-black);
--color-danger: var(--color-red-500);
--color-on-danger: var(--color-black);
/* border radius */
--radius-radius: var(--radius-sm);
}
[data-theme=neo-brutalism] {
/* fonts */
--font-body: 'Space Mono', monospace;
--font-title: 'Montserrat', sans-serif;
/* light theme */
--color-surface: var(--color-white);
--color-surface-alt: var(--color-neutral-50);
--color-on-surface: var(--color-black);
--color-on-surface-strong: var(--color-black);
--color-primary: var(--color-violet-500);
--color-on-primary: var(--color-white);
--color-secondary: var(--color-lime-400);
--color-on-secondary: var(--color-black);
--color-outline: var(--color-black);
--color-outline-strong: var(--color-black);
/* dark theme */
--color-surface-dark: var(--color-neutral-950);
--color-surface-dark-alt: var(--color-neutral-800);
--color-on-surface-dark: var(--color-neutral-200);
--color-on-surface-dark-strong: var(--color-white);
--color-primary-dark: var(--color-violet-400);
--color-on-primary-dark: var(--color-black);
--color-secondary-dark: var(--color-lime-300);
--color-on-secondary-dark: var(--color-black);
--color-outline-dark: var(--color-neutral-300);
--color-outline-dark-strong: var(--color-white);
/* shared colors */
--color-info: var(--color-sky-600);
--color-on-info: var(--color-black);
--color-success: var(--color-green-600);
--color-on-success: var(--color-black);
--color-warning: var(--color-amber-500);
--color-on-warning: var(--color-black);
--color-danger: var(--color-red-500);
--color-on-danger: var(--color-black);
/* border radius */
--radius-radius: var(--radius-none);
}
[data-theme=halloween] {
/* fonts */
--font-body: 'Poppins', sans-serif;
--font-title: 'Denk One', sans-serif;
/* light theme */
--color-surface: var(--color-white);
--color-surface-alt: var(--color-gray-100);
--color-on-surface: var(--color-slate-600);
--color-on-surface-strong: var(--color-purple-800);
--color-primary: var(--color-orange-400);
--color-on-primary: var(--color-slate-100);
--color-secondary: var(--color-purple-600);
--color-on-secondary: var(--color-slate-100);
--color-outline: var(--color-gray-200);
--color-outline-strong: var(--color-orange-500);
/* dark theme */
--color-surface-dark: var(--color-black);
--color-surface-dark-alt: var(--color-gray-900);
--color-on-surface-dark: var(--color-violet-100);
--color-on-surface-dark-strong: var(--color-white);
--color-primary-dark: var(--color-lime-400);
--color-on-primary-dark: var(--color-black);
--color-secondary-dark: var(--color-fuchsia-600);
--color-on-secondary-dark: var(--color-white);
--color-outline-dark: var(--color-slate-700);
--color-outline-dark-strong: var(--color-purple-600);
/* shared colors */
--color-info: var(--color-sky-500);
--color-on-info: var(--color-slate-100);
--color-success: var(--color-green-400);
--color-on-success: var(--color-slate-900);
--color-warning: var(--color-amber-500);
--color-on-warning: var(--color-slate-900);
--color-danger: var(--color-red-500);
--color-on-danger: var(--color-slate-100);
/* border radius */
--radius-radius: var(--radius-xl);
}
[data-theme=zombie] {
/* fonts */
--font-body: 'Montserrat', sans-serif;
--font-title: 'Denk One', sans-serif;
/* light theme */
--color-surface: var(--color-violet-50);
--color-surface-alt: var(--color-violet-100);
--color-on-surface: var(--color-slate-600);
--color-on-surface-strong: var(--color-purple-800);
--color-primary: var(--color-orange-400);
--color-on-primary: var(--color-slate-100);
--color-secondary: var(--color-purple-600);
--color-on-secondary: var(--color-slate-100);
--color-outline: var(--color-gray-200);
--color-outline-strong: var(--color-slate-800);
/* dark theme */
--color-surface-dark: var(--color-indigo-950);
--color-surface-dark-alt: var(--color-violet-950);
--color-on-surface-dark: var(--color-violet-100);
--color-on-surface-dark-strong: var(--color-white);
--color-primary-dark: var(--color-orange-600);
--color-on-primary-dark: var(--color-slate-100);
--color-secondary-dark: var(--color-lime-500);
--color-on-secondary-dark: var(--color-black);
--color-outline-dark: var(--color-slate-700);
--color-outline-dark-strong: var(--color-slate-400);
/* shared colors */
--color-info: var(--color-sky-500);
--color-on-info: var(--color-slate-100);
--color-success: var(--color-green-400);
--color-on-success: var(--color-slate-900);
--color-warning: var(--color-amber-500);
--color-on-warning: var(--color-slate-900);
--color-danger: var(--color-red-500);
--color-on-danger: var(--color-slate-100);
/* border radius */
--radius-radius: var(--radius-xl);
}
[data-theme=pastel] {
/* fonts */
--font-body: 'Playpen Sans', cursive;
--font-title: 'Playpen Sans', cursive;
/* light theme */
--color-surface: var(--color-amber-50);
--color-surface-alt: var(--color-amber-100);
--color-on-surface: var(--color-neutral-500);
--color-on-surface-strong: var(--color-neutral-700);
--color-primary: var(--color-rose-400);
--color-on-primary: var(--color-white);
--color-secondary: var(--color-orange-200);
--color-on-secondary: var(--color-neutral-800);
--color-outline: var(--color-neutral-200);
--color-outline-strong: var(--color-neutral-500);
/* dark theme */
--color-surface-dark: var(--color-neutral-900);
--color-surface-dark-alt: var(--color-neutral-800);
--color-on-surface-dark: var(--color-violet-100);
--color-on-surface-dark-strong: var(--color-white);
--color-primary-dark: var(--color-rose-400);
--color-on-primary-dark: var(--color-white);
--color-secondary-dark: var(--color-orange-200);
--color-on-secondary-dark: var(--color-neutral-800);
--color-outline-dark: var(--color-neutral-700);
--color-outline-dark-strong: var(--color-neutral-600);
/* shared colors */
--color-info: var(--color-blue-300);
--color-on-info: var(--color-sky-800);
--color-success: var(--color-green-300);
--color-on-success: var(--color-green-800);
--color-warning: var(--color-amber-300);
--color-on-warning: var(--color-amber-700);
--color-danger: var(--color-red-300);
--color-on-danger: var(--color-red-800);
/* border radius */
--radius-radius: var(--radius-xl);
}
[data-theme=90s] {
/* fonts */
--font-body: 'Poppins', sans-serif;
--font-title: 'Oswald', sans-serif;
/* light theme */
--color-surface: var(--color-neutral-100);
--color-surface-alt: var(--color-neutral-200);
--color-on-surface: var(--color-neutral-800);
--color-on-surface-strong: var(--color-black);
--color-primary: var(--color-purple-500);
--color-on-primary: var(--color-white);
--color-secondary: var(--color-sky-500);
--color-on-secondary: var(--color-white);
--color-outline: var(--color-neutral-300);
--color-outline-strong: var(--color-neutral-800);
/* dark theme */
--color-surface-dark: var(--color-neutral-800);
--color-surface-dark-alt: var(--color-neutral-900);
--color-on-surface-dark: var(--color-neutral-300);
--color-on-surface-dark-strong: var(--color-neutral-100);
--color-primary-dark: var(--color-purple-400);
--color-on-primary-dark: var(--color-black);
--color-secondary-dark: var(--color-blue-400);
--color-on-secondary-dark: var(--color-black);
--color-outline-dark: var(--color-neutral-700);
--color-outline-dark-strong: var(--color-neutral-300);
/* shared colors */
--color-info: var(--color-cyan-500);
--color-on-info: var(--color-black);
--color-success: var(--color-teal-400);
--color-on-success: var(--color-black);
--color-warning: var(--color-yellow-300);
--color-on-warning: var(--color-black);
--color-danger: var(--color-pink-500);
--color-on-danger: var(--color-black);
/* border radius */
--radius-radius: var(--radius-xl);
}
[data-theme=christmas] {
/* fonts */
--font-body: 'Lato', sans-serif;
--font-title: 'Jost', sans-serif;
/* light theme */
--color-surface: var(--color-white);
--color-surface-alt: var(--color-emerald-50);
--color-on-surface: var(--color-neutral-700);
--color-on-surface-strong: var(--color-emerald-800);
--color-primary: var(--color-red-600);
--color-on-primary: var(--color-white);
--color-secondary: var(--color-emerald-700);
--color-on-secondary: var(--color-white);
--color-outline: var(--color-neutral-300);
--color-outline-strong: var(--color-neutral-800);
/* dark theme */
--color-surface-dark: var(--color-emerald-950);
--color-surface-dark-alt: var(--color-emerald-800);
--color-on-surface-dark: var(--color-neutral-200);
--color-on-surface-dark-strong: var(--color-amber-100);
--color-primary-dark: var(--color-red-600);
--color-on-primary-dark: var(--color-white);
--color-secondary-dark: var(--color-emerald-600);
--color-on-secondary-dark: var(--color-white);
--color-outline-dark: var(--color-emerald-900);
--color-outline-dark-strong: var(--color-white);
/* shared colors */
--color-info: var(--color-cyan-500);
--color-on-info: var(--color-black);
--color-success: var(--color-emerald-500);
--color-on-success: var(--color-black);
--color-warning: var(--color-amber-500);
--color-on-warning: var(--color-black);
--color-danger: var(--color-red-500);
--color-on-danger: var(--color-black);
/* border radius */
--radius-radius: var(--radius-md);
}
[data-theme=prototype] {
/* fonts */
--font-body: 'Playpen Sans', cursive;
--font-title: 'Playpen Sans', cursive;
/* light theme */
--color-surface: var(--color-white);
--color-surface-alt: var(--color-neutral-100);
--color-on-surface: var(--color-black);
--color-on-surface-strong: var(--color-black);
--color-primary: var(--color-black);
--color-on-primary: var(--color-white);
--color-secondary: var(--color-neutral-700);
--color-on-secondary: var(--color-white);
--color-outline: var(--color-black);
--color-outline-strong: var(--color-black);
/* dark theme */
--color-surface-dark: var(--color-black);
--color-surface-dark-alt: var(--color-neutral-900);
--color-on-surface-dark: var(--color-white);
--color-on-surface-dark-strong: var(--color-white);
--color-primary-dark: var(--color-white);
--color-on-primary-dark: var(--color-black);
--color-secondary-dark: var(--color-neutral-300);
--color-on-secondary-dark: var(--color-black);
--color-outline-dark: var(--color-white);
--color-outline-dark-strong: var(--color-white);
/* shared colors */
--color-info: var(--color-sky-300);
--color-on-info: var(--color-black);
--color-success: var(--color-green-300);
--color-on-success: var(--color-black);
--color-warning: var(--color-yellow-200);
--color-on-warning: var(--color-black);
--color-danger: var(--color-red-300);
--color-on-danger: var(--color-black);
/* border radius */
--radius-radius: var(--radius-none);
}
[data-theme=news] {
/* fonts */
--font-body: 'Inter', sans-serif;
--font-title: 'Merriweather', serif;
/* light theme */
--color-surface: var(--color-zinc-50);
--color-surface-alt: var(--color-zinc-100);
--color-on-surface: var(--color-neutral-600);
--color-on-surface-strong: var(--color-neutral-900);
--color-primary: var(--color-sky-700);
--color-on-primary: var(--color-white);
--color-secondary: var(--color-black);
--color-on-secondary: var(--color-white);
--color-outline: var(--color-zinc-300);
--color-outline-strong: var(--color-zinc-500);
/* dark theme */
--color-surface-dark: var(--color-zinc-900);
--color-surface-dark-alt: var(--color-zinc-800);
--color-on-surface-dark: var(--color-zinc-200);
--color-on-surface-dark-strong: var(--color-zinc-50);
--color-primary-dark: var(--color-sky-600);
--color-on-primary-dark: var(--color-white);
--color-secondary-dark: var(--color-white);
--color-on-secondary-dark: var(--color-black);
--color-outline-dark: var(--color-zinc-700);
--color-outline-dark-strong: var(--color-zinc-500);
/* shared colors */
--color-info: var(--color-sky-700);
--color-on-info: var(--color-slate-100);
--color-success: var(--color-green-700);
--color-on-success: var(--color-white);
--color-warning: var(--color-amber-600);
--color-on-warning: var(--color-amber-50);
--color-danger: var(--color-red-700);
--color-on-danger: var(--color-slate-100);
/* border radius */
--radius-radius: var(--radius-sm);
}
[data-theme=industrial] {
/* fonts */
--font-body: 'Poppins', sans-serif;
--font-title: 'Oswald', sans-serif;
/* light theme */
--color-surface: var(--color-stone-50);
--color-surface-alt: var(--color-stone-200);
--color-on-surface: var(--color-stone-800);
--color-on-surface-strong: var(--color-black);
--color-primary: var(--color-amber-500);
--color-on-primary: var(--color-black);
--color-secondary: var(--color-stone-900);
--color-on-secondary: var(--color-stone-50);
--color-outline: var(--color-stone-300);
--color-outline-strong: var(--color-blue-600);
/* dark theme */
--color-surface-dark: var(--color-stone-950);
--color-surface-dark-alt: var(--color-stone-900);
--color-on-surface-dark: var(--color-stone-300);
--color-on-surface-dark-strong: var(--color-white);
--color-primary-dark: var(--color-amber-400);
--color-on-primary-dark: var(--color-black);
--color-secondary-dark: var(--color-stone-700);
--color-on-secondary-dark: var(--color-white);
--color-outline-dark: var(--color-stone-700);
--color-outline-dark-strong: var(--color-blue-500);
/* shared colors */
--color-info: var(--color-sky-600);
--color-on-info: var(--color-slate-100);
--color-success: var(--color-green-600);
--color-on-success: var(--color-white);
--color-warning: var(--color-amber-500);
--color-on-warning: var(--color-black);
--color-danger: var(--color-red-600);
--color-on-danger: var(--color-white);
/* border radius */
--radius-radius: var(--radius-none);
}
}