Docs GitHub Sign in

Theming

Theming

Design tokens

Core tokens live in resources/css/app.css under :root and [data-theme="light"].

--color-brand
--color-brand-hover
--color-brand-contrast
--color-surface
--color-surface-hover
--color-surface-muted
--color-text
--color-text-muted
--color-text-strong
--color-card-bg
--color-card-border
--color-input-border

Component layer

resources/css/components.css maps components to tokenized styles:

.btn, .btn-primary, .btn-secondary, .btn-danger
.card, .badge, .alert, .form-input
.table, .pagination, .modal, .empty-state

Theme toggle and persistence

Use data-theme-toggle buttons with data-theme-toggle-icon spans.
resources/js/components/theme-toggle.js updates data-theme on <html>.
Unauthenticated users persist preference in localStorage key keel-theme.
Authenticated users are persisted server-side via POST /settings/theme.
Theme::htmlAttribute() emits the server preference into the initial HTML tag.