Skip to main content

Default theme

The default theme is the versatile, multi-purpose option that ships pre-active on every fresh Flexweg CMS install. It's designed for blogs, personal sites, documentation, and mixed-content publications — not flashy, but solid and predictable.

The default theme is special: it always stays bundled in the admin SPA, even when other themes are uninstalled. It serves as the fallback when no other theme is active. You can never "uninstall" the default theme.

Visual style​

  • Single-column reading layout — content centered, max-width ~720px
  • Optional sidebar for posts (toggleable via theme settings)
  • Card-grid home page with hero image + 3-column posts grid
  • Category archives with breadcrumbs and post cards
  • Author profile pages with bio + avatar + post list
  • Material 3-inspired colour tokens — surfaces / on-surfaces / outlines / accent, all overridable
  • Typography — Newsreader (serif) for body + Inter (sans) for UI by default; switchable via the Style settings tab

CSS pipeline​

The default theme uses SCSS, not Tailwind. The CSS is hand-written under src/themes/default/theme.scss with explicit :root variable declarations + @layer blocks.

The Style settings tab regenerates the CSS by:

  1. Taking the bundled cssText (compiled SCSS at build time)
  2. Replacing the @import url(...) line for the Google Fonts pair with the user's chosen pair
  3. Appending a :root { … } block with the user's variable overrides

This means swapping fonts or colours doesn't require a build — the regenerated CSS is uploaded to /theme-assets/default.css and the next page load picks it up.

Settings page​

Two tabs: General + Style.

General tab​

  • Logo upload — image picker. The image is resized to 480×144 WebP and uploaded to /theme-assets/default-logo.webp. The theme's menu-loader.js runtime swaps the text wordmark for an <img> on the next page load.
  • Logo enabled — toggle to show/hide the logo (without deleting the file)

Style tab​

22 design tokens grouped by category:

Surfaces (5 tokens):

  • --color-bg — page background
  • --color-surface — base surface
  • --color-surface-low / -mid / -high / -highest — tonal layers

Foreground (3 tokens):

  • --color-on-surface — primary text
  • --color-on-surface-variant — secondary text
  • --color-on-surface-muted — tertiary / placeholder text

Outlines (2):

  • --color-outline — borders
  • --color-outline-variant — subtle dividers

Accent (5):

  • --color-primary — main brand colour
  • --color-on-primary — text on primary backgrounds
  • --color-secondary / -container / -on-secondary-container

Spacing (3):

  • --container-max — max content width
  • --gutter — horizontal padding inside containers
  • --section-gap — vertical space between sections

Radius (4):

  • --radius-sm / -md / -lg / -xl

Typography (font picker):

  • Serif font — pick one from: Newsreader, Lora, Playfair Display, EB Garamond, Source Serif 4, Cormorant Garamond
  • Sans-serif font — pick one from: Inter, Plus Jakarta Sans, Outfit, Manrope, DM Sans, Work Sans

Each token's row has:

  • A colour picker for color tokens (hex input)
  • A text input for length tokens (e.g. 64rem, 1.5rem, 12px)
  • A ↺ revert button to clear the override and use the default

Click Save & apply to push the regenerated CSS to Flexweg.

Templates​

The theme exports six templates:

  • BaseLayout — wraps every page. Header (logo / nav), footer, <head> tags. Includes the head-extra and body-end sentinels for plugins.
  • HomeTemplate — latest-posts grid (or static-page body, when home mode is "static-page")
  • SingleTemplate — single post / page with title + meta + body + optional sidebar
  • CategoryTemplate — category archive with breadcrumbs + posts grid
  • AuthorTemplate — author profile with bio + posts list
  • NotFoundTemplate — 404 page with back-to-home button

All six are React components in src/themes/default/templates/.

Image variants​

The default theme declares the following image format catalog:

imageFormats: {
  inputFormats: [".jpg", ".jpeg", ".png", ".webp"],
  outputFormat: "webp",
  quality: 80,
  formats: {
    small:  { width: 480,  height: 480, fit: "cover" },
    medium: { width: 800,  height: 800, fit: "cover" },
    large:  { width: 1600, height: 900, fit: "cover" },
  },
  defaultFormat: "medium",
}

When you upload an image, the admin generates small.webp, medium.webp, large.webp plus the two admin-only variants. Themes' pickFormat(view, "large") calls fall back through requested → default → largest available.

Companion JS​

The default theme ships two runtime JS files (uploaded to /theme-assets/):

  • default-menu.js — fetches /menu.json, fills [data-cms-menu] containers, sets aria-current="page" on the current URL's link, wires the burger toggle (mobile)
  • default-posts.js — fetches /posts.json for related-posts widgets and search modal data

Both are vanilla JS (~5-15 KB each), loaded by the theme's BaseLayout via <script defer>.

When to use it​

  • Blogs and personal sites — versatile, well-organised, accessible
  • Documentation sites — predictable typography, easy to read
  • Portfolio sites — minimal chrome, content-focused
  • Mixed-content sites — articles + pages + media galleries

When to pick a different theme​

  • Magazine / news: pick magazine for editorial layouts and a sidebar-driven home
  • Vitrine / SaaS: pick corporate for marketing landings with hero blocks and CTAs

Continue​