Skip to main content

Themes overview

A theme in Flexweg CMS is a bundle of:

  • React components — BaseLayout, HomeTemplate, SingleTemplate, CategoryTemplate, AuthorTemplate, NotFoundTemplate. The publisher renders each public page through these.
  • CSS — uploaded once to /theme-assets/<theme-id>.css on Flexweg. Every published page references it.
  • Optional runtime JS — small vanilla JS files that hydrate dynamic widgets on the public site (menu loaders, related-posts widgets, search modal). Not React on the public side.
  • Optional theme blocks — custom blocks that show up in the editor's inserter (e.g. magazine/hero-split, corporate/services-grid).
  • Optional settings page — admin-side UI for theme customisation (logo, colour palette, fonts, layout toggles).

Switching themes re-renders every published page with the new theme's templates and CSS. There's no compatibility layer — the new theme has full visual control over your site.

What ships out of the box​

Three themes come bundled with the admin:

default — versatile, multi-purpose​

Best for blogs, personal sites, mixed content. SCSS-based pipeline — variables and @layer blocks. Ships with:

  • Single-column post layout with optional sidebar
  • Card-grid home page with hero
  • Category archives with breadcrumbs
  • Author profile pages
  • Logo support (image upload + cache-bust)
  • Style customisation (colour palette + Google Fonts pair via Theme Settings)

→ Default theme reference

magazine — long-form editorial​

Best for news sites, magazines, content-heavy publications. Tailwind-based pipeline. Material 3 colour tokens. Ships with:

  • Magazine-style home (hero + featured posts + most-read sidebar + promo card)
  • Long-form single-post layout (typography-first, optimised for reading)
  • Category archives with sidebar showing all categories
  • Author profiles with social links
  • Logo support
  • Custom blocks: magazine/hero-split, magazine/most-read, magazine/promo-card
  • Style customisation (colour tokens stored as RGB triplets, font picker)

→ Magazine theme reference

corporate — vitrine / SaaS​

Best for company sites, product landings, agencies. Tailwind-based pipeline. Indigo + navy palette. Ships with:

  • Static-page home (composed of theme blocks: hero-overlay + services-grid + testimonials + cta-banner)
  • Single-post layout with author bio + popular articles + CTA card sidebar
  • Inline + burger menu navigation
  • 10 custom blocks: hero-overlay, hero-split, services-grid, cta-banner, testimonials, trust-bar, stats-grid, feature-stack, contact-info, contact-form
  • Logo support
  • Single-font system (Inter by default)

→ Corporate theme reference

Switching themes​

Open Themes in the sidebar. You see a card per theme:

  • The active theme has a green badge and a primary "Active" indicator
  • Inactive themes have an "Activate" button
  • External themes have an additional "Uninstall" button

Click an inactive theme's card → confirmation modal explains the switch will regenerate every published page. Confirm:

  1. Firestore updates settings.activeThemeId to the new theme's id
  2. The admin uploads the new theme's CSS to /theme-assets/<new-id>.css
  3. The publisher's regenerateAll() runs — re-renders every online post, page, category archive, the home, and re-runs every plugin's regeneration target (sitemaps, RSS, search index).

This can take a minute or two for sites with many posts. The progress shows in the publish log.

→ Switching themes

Customising the active theme​

If the active theme has a settings page, an entry Theme settings appears in the sidebar (above Plugins). Click it to open a per-theme configuration UI.

What's customisable depends on the theme:

  • Default: logo, colour palette, font pair (serif + sans)
  • Magazine: logo, colour palette, font pair, home layout (sidebar widgets)
  • Corporate: logo, single font, single-post sidebar (author bio toggle, popular articles, CTA card)

Saving the settings page calls the theme's optional compileCss(config) hook (default + magazine + corporate all implement this) which produces the customised CSS string and uploads it to /theme-assets/<id>.css. No re-publish of HTML pages needed — the next time anyone loads a page, the new CSS applies.

→ Theme settings

Installing custom themes​

To install a third-party theme:

  1. Get a .zip from the theme author (a packed bundle: manifest.json + bundle.js + theme.css + optional README).
  2. Themes → Install theme → pick the ZIP.
  3. The admin extracts client-side, uploads the contents to /admin/themes/<theme-id>/ on Flexweg, and registers the entry in Firestore.
  4. Reload. The theme appears in the Themes list alongside the built-ins.

→ Installing external themes

Authoring custom themes​

If you want to build your own theme, see:

What stays the same across themes​

A theme doesn't control:

  • The CMS's URL structure (always /category/post.html etc.)
  • The Firestore schema for posts / pages / terms / media
  • The plugin / hook system
  • The admin UI

A theme does control:

  • The HTML structure of every published page (within the contract — see Templates contract)
  • The CSS / layout / fonts / colours
  • Optional blocks that show up in the editor for the active theme
  • A settings page

That separation is why themes can be swapped at any time without touching content. Your posts in Firestore stay the same; only the rendering changes.

Continue​