How to set up themes

Penguin UI offers 13 ready-to-use themes. Use them as they are or tweak settings like colors and border radius to match your style. You can manage theme styles from the theme page or the .

There are two ways to apply themes in your code:

Classic Method

Pick your theme and colors, and the source code for each component will update automatically with preset classes like "bg-blue-500".

CSS
<button class="">Click Me</button>

Since the styles are directly in the code, making design changes later can be tricky. Tailwind V4 makes this easier with the new way of setting styles, we call this the modern method, which keeps things more flexible and easier to update.

Modern Method

This method uses a CSS-first approach introduced in Tailwind CSS v4, where design tokens are defined as CSS variables for better scalability and easier maintenance.

Tailwind's "@theme" directive makes it easy to declare these tokens, letting you use utility classes like "bg-primary".

CSS
@theme {
    --color-primary: var(--color-blue-500);
}

You can also assign custom color values directly to these tokens:

CSS
@theme {
    --color-primary: oklch(0.94 0.11 115.03);
}

Multiple Themes

You can define multiple themes in your CSS and switch between them using the 'data-theme' attribute. attribute selector.

Simply add them to the Tailwind's '@layer' base. Apply them by using the 'data-theme' attribute on your '<html>' tag.

CSS
@layer base {
    [data-theme=modern] {
        --color-primary: var(--color-blue-500);
    }
    [data-theme=halloween] {
        --color-primary: var(--color-orange-500);
    }
    [data-theme=pastel] {
        --color-primary: var(--color-rose-400);
    }
}
HTML

<html data-theme="halloween">

Use our CSS generator to get the code for each theme.

Fonts

You can find all the fonts used in Penguin UI on Google Fonts. After adding them to your project, you can create font tokens.

CSS
@theme {
    --font-inter: 'Inter', sans-serif;
}

Now you can use them as a class, like 'font-inter', or as variables in your CSS.

CSS
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-inter);
}

Borders

You can pick border colors and radius within the theme:

CSS
@theme {
    --color-outline: var(--color-neutral-300);
    --color-outline-strong: var(--color-neutral-800);

    --color-outline-dark: var(--color-neutral-700);
    --color-outline-dark-strong: var(--color-neutral-300);
    
    --radius-radius: var(--radius-md);
}

You can also turn the border on or off. This works well with the classic method. However, with the modern method, you can turn off borders by overwriting the '.border' class.

Just keep in mind this will affect all borders, even the ones you want to keep and cause some design or accessibility issues.

CSS

.border {
    border: none;
}

Use the '!border' class instead of 'border' on the element that you want to keep the border.

Similarly, you can do this when using multiple themes to turn off the border for a particular theme.

CSS
[data-theme=minimal] .border {
    border: none;
}
Theme Settings
Primary Color (Light Mode)
more color options
Border Radius

🍪 Got Cookies!

We use cookies to ensure that we give you the best experience on our website. For more information, please read our Privacy Policy .