Theming

Components never hard-code brand colours. They use Quasar's colour names, such as color="primary", text-primary and bg-dark, so changing the colours once restyles every Component you have copied.

Set your brand colours

Quasar reads its colours from Sass variables.

Nuxt with nuxt-quasar-ui: create assets/quasar-variables.scss and point the module at it.

@forward "quasar/src/css/variables.sass" with (
  $primary: #0ea5e9,
  $secondary: #26a69a,
  $accent: #9c27b0,
  $dark: #0f172a,
  $dark-page: #121212,
  $positive: #21ba45,
  $negative: #c10015,
  $info: #31ccec,
  $warning: #f2c037
);

export default defineNuxtConfig({
  quasar: {
    sassVariables: "~/assets/quasar-variables.scss",
  },
});

nuxt-quasar-ui needs the sass package for this: npm install -D sass.

Quasar CLI: edit src/css/quasar.variables.scss, which the project already has:

$primary   : #0ea5e9;
$secondary : #26a69a;
$accent    : #9c27b0;
$dark      : #0f172a;
$dark-page : #121212;

Use the Theme Builder

The free Quasar Theme Builder lets you pick brand, semantic and dark-mode colours, generates a primary and gray scale, and previews them on real Components. Export it to get two files:

• quasar-variables.scss, the Sass variables above plus the colour scales;
• main.scss, CSS variables, the font and dark-mode styles.

Save them in your project's CSS folder, then load main.scss as global CSS (css: ["~/assets/main.scss"] in nuxt.config.ts, or css: ["app.scss"] in quasar.config after renaming it).

Fonts

Components inherit the page font. Set it once on body. The QuasarUI previews use Inter.