Theming
JournalPHP is built on Vue 3 + Tailwind CSS and provides multiple customization levels — from admin panel settings to editing source code.
Admin Panel Settings
Logo & Identity
General Settings (/admin-panel/settings/general):
| Setting | Purpose |
|---|---|
| Site Name | Displayed in the header and page titles |
| Logo | Main logo (light theme) |
| Logo (dark theme) | Logo for dark theme |
| Favicon | Browser tab icon |
Files are saved in storage/app/public/.
Public Site Appearance
Site Appearance (/admin-panel/settings/appearance):
Configure public theme CSS variables for light and dark mode. Variables are applied on the public site via resources/css/variables.css.
| Group | Example variables |
|---|---|
| Brand | --brand-color, --theme-color-brand-primary, --theme-color-brand-header |
| Signals | --theme-color-signal-active-default, --theme-color-signal-positive-default, --theme-color-signal-negative-default |
| Background & text | --theme-color-background, --theme-color-background-content, --theme-color-text-primary, --theme-color-text-secondary |
| Other | --theme-color-border, --theme-color-button-secondary |
Default values are defined in config/appearance.php. Each variable can be reset to its default from the admin panel UI.
Admin Panel Color Scheme
Color Scheme (/admin-panel/settings/theme):
- Toggle between light and dark themes for the admin interface
- Choose an accent color
Settings are stored in the browser's localStorage — they do not affect the public site.
Cookie Banner
Cookie Banner (/admin-panel/settings/cookie-consent) — enable the banner and link to the cookie policy.
Code Customization
Frontend (Vue + Tailwind)
Frontend structure:
resources/js/
├── Pages/ # Inertia pages
├── components/ # Reusable components
├── Admin/ # Admin panel components
├── Shared/ # Shared components
└── editor/ # Editor.js integration
resources/css/
├── app.css # Main styles (Tailwind)
└── variables.css # Public theme CSS variablesTailwind is configured in tailwind.config.js. For global CSS variables or base style overrides, use resources/css/app.css and resources/css/variables.css.
Public Site Dark Theme
The public dark theme is controlled via the dark class on <html> and CSS variables from Site Appearance.
Custom Pages
Administrators can create static pages via Pages (/admin-panel/pages). Pages are accessible at /p/{slug}.
Rebuilding the Frontend
After changes to resources/js/ or resources/css/, rebuild assets:
Development (hot reload via Vite):
# Already running in the frontend container
docker compose logs frontendProduction (frontend is included in the image at build time):
docker compose -f docker-compose.prod.yml up -d --buildOr manually:
docker compose exec frontend npm run buildChanges in Site Appearance (CSS variables in the database) take effect without rebuilding the frontend.