Theming

CaretCMS ships with one studio chrome theme — studio — a quiet dark UI rooted in the inline editor’s blue. Designed sites are out of scope for core; they ship as separate packages.

Studio chrome

The studio chrome is the look of the admin UI itself (/admin, /admin/cms). It stays neutral on purpose so it doesn’t compete with your site or carry someone else’s branding.

You can override individual tokens without forking the preset:

import caret from '@caretcms/core';

export default defineConfig({
  integrations: [
    caret({
      theme: {
        tokens: {
          '--color-theme-accent': '#9333ea',
          '--font-theme-body': '"IBM Plex Sans", system-ui, sans-serif',
        },
      },
    }),
  ],
});

Tokens cascade on top of the studio defaults — anything you don’t set keeps its default value.

Available tokens

/* Surface */
--color-theme-bg-deep
--color-theme-surface
--color-theme-surface-elevated
--color-theme-surface-muted

/* Border */
--color-theme-border-subtle
--color-theme-border

/* Accent */
--color-theme-accent
--color-theme-accent-soft
--color-theme-accent-strong
--color-theme-on-accent

/* Text */
--color-theme-text
--color-theme-text-muted
--color-theme-text-dim

/* State */
--color-theme-success
--color-theme-danger
--color-theme-info
--color-theme-warning

/* Type */
--font-theme-body
--font-theme-heading

The full default values live in packages/core/src/runtime/themes/preset-tokens.ts.

Brand mark

Brand identity is separate from chrome tokens:

caret({
  brand: {
    name: 'Acme Studio',
    logo: '/logo.svg',
    faviconUrl: '/favicon.ico',
  },
})

This shows up in the studio header and the login screen.

Site themes

The look of your site (not the admin UI) lives in your Astro project’s components, CSS, and content. Core has no opinion about it.

Designed Astro sites preconfigured with the CMS will ship as separate packages — @caretcms/theme-portfolio, @caretcms/theme-blog, etc. Install one to bootstrap a complete editable site, or build your own from examples/starter.

Until those land, the path is:

Start from examples/starter or examples/content-site
Add your own components, layout, and styles
Tag editable elements with data-caret
Ship