Using Themes

How to find, download, and integrate Pure Admin themes into your application.

Browsing Themes

The homepage shows all available themes with live search and tag filtering. Each theme card shows the color palette, supported modes (light/dark), and font. Click a theme to see its full detail page with documentation, variants, and download options.

You can also browse from the command line: 

# List all themes\nnpx @keenmate/pureadmin list\n\n# Search by name or description\nnpx @keenmate/pureadmin search dark\n\n# Show full details for a theme\nnpx @keenmate/pureadmin info audi\n\n# Or use the API directly\ncurl https://pureadmin.io/api/themes?q=dark&tags=Dark

Downloading a Theme

From the website

Click the download button on any theme's detail page at /theme/:slug. If the theme has multiple versions, use the version dropdown to pick a specific one.

Via the CLI

# Download the latest version\nnpx @keenmate/pureadmin download audi\n\n# Download a specific version\nnpx @keenmate/pureadmin download audi --version 2.0.2\n\n# Or use curl directly\ncurl -fsSL -o audi.zip https://pureadmin.io/api/themes/audi/download

Via npm

Built-in themes are part of the @keenmate/pure-admin-core package. Community themes have their own packages (listed on each theme's detail page). 

# Built-in themes (corporate, audi, dark, express, minimal)\nnpm install @keenmate/pure-admin-core\n\n# Community themes (check the theme's detail page for the package name)\nnpm install @keenmate/pure-admin-cafeindustrial-theme

What's in the ZIP

pure-admin-theme-audi-2.0.2.zip\n├── theme.json          # Manifest with metadata, checksums, colors\n├── css/audi.css        # Compiled CSS — drop into any project\n├── scss/audi.scss      # SCSS source — for customization\n├── assets/\n│   └── fonts/          # Bundled font files (if any)\n├── preview/            # Thumbnail (if any)\n└── README.md           # Generated usage instructions

The theme.json inside the ZIP contains the full theme metadata including integrity checksums (see Integrity System).

Quick Start: CSS Only

The simplest integration — no build tools required. Extract the ZIP and link the CSS file: 

<link rel="stylesheet" href="path/to/css/audi.css">

If the theme bundles fonts, make sure the assets/fonts/ directory is accessible relative to the CSS file. The CSS uses relative url() paths like ../assets/fonts/MyFont.woff2.

SCSS Integration

For full control over theme variables, use the SCSS source. See the Theme Customization guide for details on overriding variables, swapping fonts, and baseline correction. 

// your-project/styles.scss\n\n// Override variables before importing\n$primary-bg: #0066cc;\n$card-border-radius: 8px;\n\n// Import the theme\n@import '@keenmate/pure-admin-theme-audi/src/scss/audi';

Compile with sass:

sass styles.scss output.css \\\n  --load-path=node_modules \\\n  --silence-deprecation=import

Choosing a Version

Each theme has a versions array and a latest field. The download endpoint defaults to the latest version. 

# Check available versions\nnpx @keenmate/pureadmin versions audi\n\n# Or show full theme info (versions, core compat, variants, etc.)\nnpx @keenmate/pureadmin info audi

Core compatibility

Each theme declares which version of @keenmate/pure-admin-core it's built for (e.g. "^2.0.0" means >=2.0.0 and <3.0.0). You can filter themes by core version directly via the API: 

# List themes compatible with pure-admin-core 2.x
npx @keenmate/pureadmin compatible 2.0.0

# Or via the API
curl https://pureadmin.io/api/themes?core_version=2.0.0

# Combine with search
curl "https://pureadmin.io/api/themes?q=dark&core_version=2.0.0"

The core_version parameter supports semver ranges declared by themes:

  • ^2.0.0 — matches 2.x.x (same major, any minor/patch)
  • ~2.1.0 — matches 2.1.x (same major.minor, any patch)
  • >=1.5.0 — matches 1.5.0 and above

Themes without a declared core version are always included (assumed compatible).

Caching with ETags

If your application fetches themes programmatically, use ETags to avoid re-downloading unchanged themes. The API returns an ETag header on every theme response. 

# First request — store the ETag
response=$(curl -sI https://pureadmin.io/api/themes/audi)
etag=$(echo "$response" | grep -i etag | awk '{print $2}' | tr -d '\r')
echo "ETag: $etag"

# Later — only download if changed
status=$(curl -s -o /dev/null -w "%{http_code}" \
  -H "If-None-Match: $etag" \
  https://pureadmin.io/api/themes/audi)

if [ "$status" = "304" ]; then
  echo "Theme unchanged, using cached version"
else
  echo "Theme updated, re-download"
fi

The ETag for a single theme (/api/themes/:slug) is the theme's content_sha — it only changes when that specific theme is updated. You can verify the downloaded ZIP matches by comparing the ETag against checksums.content_sha inside the ZIP's theme.json.

Dockerfile

For containerized applications, download themes at build time:

Single theme

RUN curl -fsSL -o /tmp/audi.zip \\\n      https://pureadmin.io/api/themes/audi/download && \\\n    unzip -o /tmp/audi.zip -d /app/themes/audi/ && \\\n    rm /tmp/audi.zip

All themes as a bundle

ARG THEMES_URL=https://pureadmin.io/api/bundle
RUN curl -fsSL -o /tmp/themes.zip "${THEMES_URL}" && \
    unzip -o /tmp/themes.zip -d /app/themes/ && \
    rm /tmp/themes.zip

Selected themes

RUN curl -fsSL -o /tmp/themes.zip \
      "https://pureadmin.io/api/bundle?themes=corporate,audi,dark" && \
    unzip -o /tmp/themes.zip -d /app/themes/ && \
    rm /tmp/themes.zip

CI/CD Integration

Use ETags in your CI pipeline to skip theme downloads when nothing has changed: 

#!/bin/bash
# ci-download-theme.sh — download theme only if updated

THEME="audi"
CACHE_DIR=".theme-cache"
ETAG_FILE="$CACHE_DIR/$THEME.etag"
ZIP_FILE="$CACHE_DIR/$THEME.zip"

mkdir -p "$CACHE_DIR"

HEADERS=()
if [ -f "$ETAG_FILE" ] && [ -f "$ZIP_FILE" ]; then
  HEADERS=(-H "If-None-Match: $(cat $ETAG_FILE)")
fi

HTTP_CODE=$(curl -s -w "%{http_code}" -o "$ZIP_FILE.tmp" \
  -D "$CACHE_DIR/headers.txt" \
  "${HEADERS[@]}" \
  "https://pureadmin.io/api/themes/$THEME/download")

if [ "$HTTP_CODE" = "304" ]; then
  echo "$THEME: unchanged (cached)"
  rm -f "$ZIP_FILE.tmp"
elif [ "$HTTP_CODE" = "200" ]; then
  mv "$ZIP_FILE.tmp" "$ZIP_FILE"
  grep -i etag "$CACHE_DIR/headers.txt" | awk '{print $2}' | tr -d '\r' > "$ETAG_FILE"
  echo "$THEME: downloaded new version"
else
  echo "$THEME: download failed (HTTP $HTTP_CODE)"
  rm -f "$ZIP_FILE.tmp"
  exit 1
fi

JavaScript / TypeScript

Fetch theme data from your frontend or Node.js backend: 

// List all themes
const res = await fetch('https://pureadmin.io/api/themes');
const { themes } = await res.json();

// Get a single theme with its metadata
const res = await fetch('https://pureadmin.io/api/themes/audi');
const { theme } = await res.json();
console.log(theme.name);        // "Audi"
console.log(theme.latest);       // "2.0.2"
console.log(theme.content_sha);  // "sha256:61df..." (matches ETag)

// Conditional fetch with ETag
let etag = localStorage.getItem('themes-etag');
const res = await fetch('https://pureadmin.io/api/themes', {
  headers: etag ? { 'If-None-Match': etag } : {}
});
if (res.status === 200) {
  const data = await res.json();
  localStorage.setItem('themes-etag', res.headers.get('etag'));
  // process updated themes...
} else if (res.status === 304) {
  // use cached data
}