Theming

WhatsMine's interface is built with TailwindCSS and supports light/dark mode out of the box. Most branding (name, logo, colour) is done from the admin panel without code — but if you want to change the underlying design tokens, here's how.

Brand palette

The brand colours are defined as a Tailwind palette and mirrored in a .branding file (the single source of truth). WhatsMine's defaults:

Token	Hex	Role
brand (forest green)	`#467235`	Primary — buttons, links, active states.
accent (amber)	`#FFBF00`	Highlights and call-outs.
secondary (dark green)	`#283F24`	Deep accents.
surface	`#f7faec`	Soft background.
coral	`#f04e2e`	Danger / destructive.

The typeface is Space Grotesk.

Changing the brand colour

The simplest change is the primary colour in tailwind.config.js, under theme.extend.colors.brand:

colors: {
  brand: {
    50:  '#f2f8ec',
    // …
    500: '#5a8b38',
    600: '#467235',  // ← your main brand colour
    700: '#38592a',
  },
},

After editing, rebuild assets:

npm run build

Per-platform vs. per-client branding

For most rebranding you don't need to touch Tailwind at all — set your primary colour, logo and name in Admin → Settings, and per-customer branding under each client. Editing tailwind.config.js is only for deeper design-system changes.

Dark mode

Dark mode is class-based (dark on <html>). The layouts manage it from the user's preference or system setting. Components use Tailwind's dark: variants throughout.

Layouts

Layout	Used by
`AdminLayout`	Admin panel pages.
`ClientLayout`	Customer app pages.
`InboxLayout`	The full-height inbox.
`LandingLayout`	Public marketing pages.
`AuthLayout`	Login/register screens.

Layouts live in resources/js/Layouts/.

Shared Inertia props

Every page receives shared props via usePage().props — including auth, locale, flash, branding and notification counts — so components can adapt to the current user, tenant and theme.

Fonts

To change the font, update theme.extend.fontFamily.sans in tailwind.config.js and load the font (e.g. via a <link> in the app layout or @import in CSS), then rebuild.

➡️ Next: Internationalisation.