Theme Customization

Pure Admin themes are SCSS files that override variables and import the core framework. You can customize any theme by overriding variables before the import — including the font family.

Basic Variable Override

All theme variables use !default, so any value you set before importing the theme takes precedence:

// your-project/styles.scss

// Override variables before importing the theme
$base-accent-color: #0066cc;
$card-border-radius: 8px;

// Import the theme — your overrides win
@import '@keenmate/pure-admin-theme-audi/src/scss/audi';

Using a Custom Font

Every theme bundles its own font (e.g., Audi bundles Fira Sans Condensed). If you want to use a different font, override $base-font-family before the theme import:

// your-project/styles.scss

// 1. Set your font family (overrides the theme's bundled font)
$base-font-family: 'Monda', Arial, sans-serif;

// 2. Declare @font-face with your font files
@font-face {
  font-family: 'Monda';
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/monda-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Monda';
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/monda-700.woff2') format('woff2');
}

// 3. Import the theme
@import '@keenmate/pure-admin-theme-audi/src/scss/audi';

Why bundle font files locally? If you load fonts from Google Fonts CDN, the theme's bundled font renders first (it's local and fast), then the remote font arrives and causes a visible flash (FOUT). Bundling your font files in the project ensures a single render with no font swap.

Font Baseline Correction

Different fonts have different vertical metrics (ascent, descent, line-gap). When you swap fonts, text may appear to sit higher or lower within buttons, card headers, and other aligned components. The CSS @font-face descriptors ascent-override and descent-override fix this by adjusting where glyphs sit within the line box.

@font-face {
  font-family: 'Monda';
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/monda-400.woff2') format('woff2');
  ascent-override: 110%;    /* push glyphs up within the line box */
  descent-override: 20%;    /* reduce space below the baseline */
}

@font-face {
  font-family: 'Monda';
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/monda-700.woff2') format('woff2');
  ascent-override: 110%;
  descent-override: 20%;
}

How to find the right values

The correct ascent-override and descent-override values depend on the specific font pair (theme default vs. your custom font). Use the Font Tuning Tool in the Pure Admin demo to find them:

Open the Font Tuning Tool
Enter your Google Font name and click Load & Generate Variants
Click Theme Default to see the theme's native font as a reference
Click through the ascent-override and descent-override presets and compare how text aligns with buttons in the card headers below
Fine-tune with the custom combination inputs until the alignment matches
Copy the generated CSS snippet into your project

Available descriptors

Descriptor	Effect	Typical range
`ascent-override`	Controls where glyphs sit vertically. Higher % = text moves up.	85% – 120%
`descent-override`	Controls space below the baseline. Lower % = less descender space.	10% – 40%
`size-adjust`	Scales the font without changing font-size. Affects width and height.	90% – 115%

Complete Example

Here's a complete example: Audi theme with Monda font, baseline-corrected:

// project/styles.scss

// Override font family
$base-font-family: 'Monda', Arial, sans-serif;

// Declare font with baseline correction
@font-face {
  font-family: 'Monda';
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/monda-400.woff2') format('woff2');
  ascent-override: 110%;
  descent-override: 20%;
}

@font-face {
  font-family: 'Monda';
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/monda-700.woff2') format('woff2');
  ascent-override: 110%;
  descent-override: 20%;
}

// Import theme — uses Monda everywhere instead of Fira Sans Condensed
@import '@keenmate/pure-admin-theme-audi/src/scss/audi';

// Result: single CSS file, single font, no flash, correct baseline