Currently, there are six themes available for Q-Press:

• Default
• Evergreen
• Mystic
• Newspaper
• Sunrise
• Tawny

Theme Gallery

Each preview below is wrapped in a qpress-theme-preview namespace. That means the gallery can show every bundled theme at once without importing every theme file or overriding the active site theme.

To use a theme, add the import to your src/css/quasar.variables.scss or src/css/quasar.variables.sass file:

@import '../.q-press/css/themes/sunrise.scss';

This will load the sunrise theme into your Q-Press enabled app. Q-Press themes are shipped as .scss files, but they can be imported from either SCSS or Sass syntax.

Import only one Q-Press theme, then add any project-specific overrides below that import. This keeps the theme variables predictable while still letting you tune colors, typography, and spacing for your site.

Runtime Theme Tokens

Q-Press also publishes the active theme as runtime CSS custom properties. These tokens are derived from the selected Sass theme and switch automatically between body.body--light and body.body--dark, so shared components can follow future theme changes without copying Sass variables into every component.

Use Sass variables when you are defining a theme, and use runtime CSS variables when you are styling reusable docs UI.

What Changes What

Token Families

Example: Theme-Aware Card

This card follows the active theme in light and dark mode:

.custom-docs-panel {
  color: var(--qpress-text-primary);
  background: var(--qpress-surface-raised);
  border: 1px solid var(--qpress-border-subtle);
  box-shadow: var(--qpress-card-shadow);
}

Changing $brand-light-bg or $brand-dark-bg changes the panel surface. Changing $brand-light-text or $brand-dark-text changes the copy. Changing $brand-secondary changes the border contrast.

Example: Pill Or Tag

Use pill tokens for compact labels that should match the menu accent color:

.custom-docs-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.25rem 0.8rem;
  color: var(--qpress-pill-text);
  background: var(--qpress-pill-bg);
  border: 1px solid var(--qpress-pill-border);
  border-radius: 999px;
}

Changing $brand-primary changes the pill text and icon color. Changing $brand-light, $dark-pill, or the current color mode changes the pill background.

Example: Local Landing Page Aliases

For larger pages, create local aliases once and then style the page with names that match the design:

.product-landing {
  --product-heading: var(--qpress-text-primary);
  --product-copy: var(--qpress-text-body);
  --product-card-bg: var(--qpress-surface-raised);
  --product-card-border: var(--qpress-border-subtle);
  --product-action-bg: var(--qpress-action-solid-bg);
  --product-action-text: var(--qpress-action-solid-text);
}

.product-card {
  color: var(--product-copy);
  background: var(--product-card-bg);
  border: 1px solid var(--product-card-border);
}

This is the pattern used by the generated landing page: --landing-* tokens point back to --qpress-* tokens. If you change the selected Q-Press theme later, the landing page follows along.

Custom Themes

If you want to build your own theme, add these variables to your src/css/quasar.variables.scss or src/css/quasar.variables.sass file and modify them to your liking:

@use 'sass:color';

$primary: #214466;
$secondary: #266660;
$accent: #853394;

$positive: #2ecc71;
$negative: #ff1732;
$info: #10a0ff;
$warning: #ffd52d;

$brand-primary: #00bfff;
$brand-secondary: #4b555c;
$brand-accent: #ea5e13;
$brand-dark: #2c3e50;
$brand-light: #f5f5f5;
$brand-medium: #6b7f86;
$brand-light-text: #4d4d4d;
$brand-light-bg: #fefefe;
$brand-dark-bg: #080e1a;
$brand-dark-text: #cbcbcb;
$brand-light-codeblock-bg: #f5f5f5;
$brand-light-codeblock-text: #4d4d4d;
$brand-dark-codeblock-bg: #121212;
$brand-dark-codeblock-text: #e6e6e6;

$header-btn-color--light: #757575;
$header-btn-hover-color--light: #212121;
$header-btn-color--dark: #929397;
$header-btn-hover-color--dark: #fff;

$light-pill: $brand-light;
$light-text: $brand-light-text;
$light-bg: $brand-light-bg;

$dark-pill: scale-color($brand-dark-bg, $lightness: 12%);
$dark-text: $brand-dark-text;
$dark-bg: $brand-dark-bg;

$separator-color: $brand-accent;
$separator-color-dark: $brand-accent;

$font-size: 16px;
$font-size-brand: 16px;
$font-weight-brand: 500;
$font-weight-technical: 400;
$letter-spacing-brand: 0.7px;

$font-family-technical:
  'Roboto',
  -apple-system,
  Avenir,
  BlinkMacSystemFont,
  'Segoe UI',
  Helvetica,
  Arial,
  sans-serif;
$font-family-examples: $font-family-technical;
$font-family-brand: 'Montserrat', $font-family-technical;

$shadow--large: 0 24px 24px 0 rgba(0, 179, 255, 0.24);
$shadow--medium: 0 6px 6px 0 rgba($brand-primary, 0.38);
$shadow--small: 0 6px 6px 0 rgba($brand-primary, 0.28);

$header-height: 55px;
$header-transition: 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);
$header-quick-transition: 0.28s ease-in-out;

For custom themes, prefer deriving dark surfaces such as $dark-pill from $brand-dark-bg instead of $brand-primary. Accent colors can become too saturated or too dark when reused as backgrounds or text in dark mode.

Media Query Breakpoints

When setting up your menu system, you may need to adjust the media query breakpoints. You can add the following to your src/css/quasar.variables.scss or src/css/quasar.variables.sass file:

$mq-list:
  375,
  470,
  510,
  600,
  780,
  860,
  910,
  1000,
  1020,
  1100,
  1130,
  1190,
  1300 /* drawer */,
  1310,
  1400;

@each $query in $mq-list {
  @media (min-width: #{$query}px) {
    .lt-#{$query} {
      display: none;
    }
  }

  @media (max-width: #{$query - 1}px) {
    .gt-#{$query} {
      display: none;
    }
  }
}