Theming

CaretCMS includes one admin-interface theme, studio. Full site designs are separate from the core package and will be distributed as their own packages.

Studio chrome

Studio chrome controls the appearance of /admin and /admin/cms. Its neutral defaults are intended to work alongside different site designs.

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