Building a client area theme

A theme controls how the signed-in client area looks: the layout, navigation and pages. The admin picks one at Settings > Client Area Theme, together with an accent colour.

Install a theme

Copy its folder into themes/. It appears in the dropdown at once. Classic must always stay installed because it is the fallback for any file a theme does not provide.

Structure

themes/my-theme/
  theme.json
  views/
    components/layouts/client.blade.php   # the layout every client page uses
    partials/...                          # anything the layout includes
    client/...                            # optional: override individual pages

theme.json:

{
  "api": 1,
  "slug": "my-theme",
  "name": "My Theme",
  "version": "1.0.0",
  "author": "You",
  "description": "One sentence shown under the dropdown.",
  "accent": "#2563eb"
}

How files are found

A view is looked up in the active theme, then in Classic, then in the main resources/views. A theme only needs the files it changes. The included Sidebar theme is a single layout file.

What a layout must keep

These make plugins and admin features work in every theme:

• <x-theme-colors /> in <head> (applies the accent colour)
• @pluginSlot('layout.head') in <head>, @pluginSlot('layout.body') at the top of <body>, and the client.footer slot
• @livewireStyles, @livewireScripts and the @vite line for the CSS and JS
• the admin impersonation banner with its "Exit to Admin" form
• the success and error alerts, the demo banner and the logged-out branch (the sign-in pages use it)
• the navigation from the admin-managed menu (App\Support\ClientMenu::items() and accountLinks())

Colours

Pages use Tailwind's blue-* colours, which read CSS variables. The accent the admin chooses replaces the whole blue scale automatically, with shades generated so text stays readable. Use blue-* for anything that should follow the accent.

Styles and builds

Tailwind scans themes/*/views/**, so after adding classes run npm run build on a development machine and ship the new public/build folder. Keep a theme's files to client-area views. Do not override admin views.