Quasar Theme Presets: 12 Starting Points Compared

Quasar theme presets save you from the blank-page problem: instead of picking eight brand colors, a font and a radius from nothing, you start from a theme that already hangs together and change what doesn't fit. The free Quasar Theme Builder ships 12 of them. This post compares all 12 by what they actually set, says which kind of product each one suits, and ends with how to tweak one and take it into your app.

If you want to know how Quasar theming works underneath (Sass variables, CSS variables, setCssVar, dark mode), the guide on creating a custom Quasar theme covers that. Here we only look at the presets.

What a Quasar theme preset sets

A preset is not just a color swap. Each one is a small theme document, and it can set any of these:

• Colors. Quasar's seven brand colors (primary, secondary, accent, positive, negative, info, warning) plus a neutral scale. Each is a palette of 11 shades from 50 to 950. The neutral scale feeds every background, text and border token, so it decides how "warm" or "cool" the whole app feels.
• Radius. One value in rem that drives the corners of cards, buttons and fields.
• Fonts. A sans family, and optionally a heading family, a mono family, a base size, line height, letter spacing and weights.
• Icons. Which icon set Quasar uses.
• Component defaults. The default look of buttons, inputs and cards, and a global control size.

Anything a preset leaves out falls back to the stock values: green primary, slate neutral, a 0.25rem radius, Public Sans at 14px with a 1.5 line height, and Material Symbols icons. Buttons default to solid, inputs to outlined, cards to outlined.

The component defaults map to plain Quasar props. A "soft" button is unelevated with a soft color class, an "outline" button is outline, a "filled" input is filled, a "subtle" or "outline" card is flat bordered, and an "elevated" card keeps QCard's default shadow. So a preset with filled, rounded inputs and large controls is the same as writing this on every field:

<q-input v-model="email" label="Email" filled rounded />
<q-btn label="Save" color="primary" unelevated rounded size="lg" />

The difference is that the preset does it once, for every component.

The 12 presets, one by one

Default

The stock theme with nothing overridden: green primary on slate, Public Sans, 0.25rem corners, solid buttons and outlined fields. It looks like a careful version of plain Quasar. Use it when you only want the token system and plan to set your own colors.

Mono

Black as the primary (white in dark mode) on a pure gray neutral, a 0.5rem radius, and Geist with Geist Mono. Inputs are filled and neutral-colored, and the dark mode page goes down to the 950 shade. With no brand hue at all, Mono suits developer tools, docs sites and anything where the content carries the color.

Cobalt

A custom utility blue on cool grays, the tightest radius of the set (0.125rem), Roboto at 13px and Bootstrap Icons. Cards are flat and bordered, and borders and muted text are pushed a shade darker in light mode for contrast. Small type and hard corners fit dense internal tools: admin panels, CRMs, back-office tables.

Sky

Sky blue on the mist neutral, a 0.75rem radius, and Figtree with a looser 1.6 line height. Buttons are soft (pastel fills) and inputs are filled. The page itself is tinted, not pure white. It reads as calm and friendly, which works for consumer SaaS, onboarding flows and help centers.

Mint

Teal on the olive neutral with a 0.75rem radius, Nunito at heavier weights (500 for body text, 800 for bold), and Eva icons. It is the only preset that changes the global size: every control is lg, buttons are rounded pills and inputs are filled and rounded. Big, soft controls make sense for wellness, education and other apps used on touch screens.

Iris

Violet primary with fuchsia for secondary and accent, on the mauve neutral. Radius 0.5rem, Manrope with slightly tight letter spacing, and Ionicons. Buttons are outlined, inputs filled. It has a design-tool or creative-product feel: portfolio builders, AI writing tools, anything that wants to look a bit expressive.

Crimson

Red on pure gray with square corners (radius 0) and Inter with heavier semibold and bold weights. Inputs are filled, icons are Material Icons, and dark mode drops to near-black. Light mode uses the 600 red, because the 500 shade leans orange. Square and loud suits media, streaming and entertainment products.

Coral

Rose primary on warm stone, with teal for positive instead of green. Radius 0.5rem, Plus Jakarta Sans, Line Awesome icons. Cards are elevated, so they float on shadows, and inputs use the neutral color for focus. It's warm and soft: good for e-commerce, booking and lifestyle apps.

Sunset

Orange primary with a yellow secondary on the taupe neutral, a 0.625rem radius, Bricolage Grotesque and Font Awesome. Buttons are elevated and cards are subtle panels. Light mode uses the 600 orange, since 500 is too light to carry white text. It has energy, which fits marketing sites, food and events.

Carbon

Amber and yellow on a custom warm "carbon" neutral, a 0.5rem radius, Outfit and Material Design Icons. The striking part is the borders: in light mode they use the darkest shade, so the UI looks inked. In dark mode they run the other way, lighter than the surface. Cards are subtle and inputs filled. A good pick for fintech, crypto and data products that want a bold, editorial look.

Bubblegum

Pink primary, violet secondary, purple accent, on a custom saturated mauve neutral. Radius 0.375rem, Poppins, and Material Symbols Rounded. It's the most playful preset, aimed at consumer and community products, kids' apps, or a side project that doesn't want to look corporate.

Parchment

A custom clay primary (a book-cloth brown) on warm parchment neutrals, a 0.375rem radius, DM Sans for text and Source Serif 4 for headings. It's the only preset with a separate heading font. Icons are Material Icons Outlined. Serif headings on warm paper make it the natural choice for blogs, writing apps, journals and knowledge bases.

Quick comparison

How to pick one

Start from the product, not your favorite color. Three questions narrow it fast:

1. How dense is the UI? Tables and forms all day point to Cobalt or Default. Few, large actions point to Mint or Sky.
2. Does the brand already have a color? If it does, pick the preset whose shape you like (radius, font, component defaults) and swap the primary. The shape is harder to get right than the hue.
3. Who reads it? Long-form reading wants Parchment's serif headings or Sky's looser line height. Data wants Cobalt's compact type or Carbon's hard borders.

Then look at it in both modes. Several presets set dark-mode shades on purpose (Mono and Crimson put the page on a darker shade than the stock theme, Carbon on a lighter one), and a theme that looks right in light mode can feel different in dark.

Tweak a preset, then export

Open the Theme Builder, pick a preset from the toolbar, and switch the preview between light and dark. Then change one thing at a time: the primary color, the radius, the font. As soon as you edit, the toolbar label changes from the preset's name back to "Presets", because the theme is now yours.

Two things worth knowing:

• The share link stays short for an untouched preset. If you export without editing, the link only carries the preset id. Once you change something, it carries the whole theme. Either way, opening it reopens the Theme Builder with that theme applied, which is handy for asking a teammate "this one?".
• Export targets. The Export dialog has a Quasar CLI target and a Nuxt target. Both give you a quasar-theme.css file and a quasar.variables.scss file. The Quasar CLI target adds config keys and a boot file that sets the component defaults. The Nuxt target puts those defaults in nuxt.config.ts instead.

What each exported file contains and where it goes is covered step by step in the custom Quasar theme guide, so I won't repeat it here.

Common questions about Quasar theme presets

Are the presets free? Yes. The Theme Builder is a free tool and every preset, the export and the share link work without an account.

Can I combine two presets? Not directly, but you get the same result by picking one and changing the parts you want from the other: for example Cobalt with Parchment's clay primary.

Do presets change my existing components? Only after you import the exported files. The CSS file defines the colors and tokens, and the component defaults change the default props of buttons, inputs and cards. Props you set by hand on a component still win.

Where did the presets come from? They are adapted from the presets in Nuxt UI's theme studio and re-expressed in Quasar's brand colors and props.

Next step

Pick the preset closest to your product, change the primary and the radius, and export it. Open the Quasar Theme Builder and try all 12 on the same preview, in light and dark.