Theming & Customization

SocialApparatus is built with customization in mind. This guide covers how to customize colors, typography, layouts, and create entirely custom themes.

Theme Architecture

The theming system is built on:

Tailwind CSS - Utility-first CSS framework
CSS Custom Properties - Dynamic color theming
Blade Components - Reusable UI elements
Laravel Asset Bundling - Vite for modern asset compilation

Quick Customization

Colors via CSS Variables

The easiest way to customize colors is through CSS custom properties. Edit resources/css/app.css:

:root {
    /* Primary Brand Colors */
    --color-primary: 59 130 246;      /* Blue */
    --color-primary-hover: 37 99 235;
    --color-primary-light: 219 234 254;

    /* Secondary Colors */
    --color-secondary: 100 116 139;   /* Slate */
    --color-accent: 168 85 247;       /* Purple */

    /* Semantic Colors */
    --color-success: 34 197 94;       /* Green */
    --color-warning: 234 179 8;       /* Yellow */
    --color-danger: 239 68 68;        /* Red */
    --color-info: 6 182 212;          /* Cyan */

    /* Background Colors */
    --color-bg-primary: 255 255 255;
    --color-bg-secondary: 248 250 252;
    --color-bg-tertiary: 241 245 249;

    /* Text Colors */
    --color-text-primary: 15 23 42;
    --color-text-secondary: 71 85 105;
    --color-text-muted: 148 163 184;

    /* Border Colors */
    --color-border: 226 232 240;
    --color-border-hover: 203 213 225;
}

/* Dark Mode */
[data-theme="dark"] {
    --color-bg-primary: 15 23 42;
    --color-bg-secondary: 30 41 59;
    --color-bg-tertiary: 51 65 85;

    --color-text-primary: 248 250 252;
    --color-text-secondary: 203 213 225;
    --color-text-muted: 100 116 139;

    --color-border: 51 65 85;
    --color-border-hover: 71 85 105;
}

Using Colors in Components

/* In your CSS */
.button-primary {
    background-color: rgb(var(--color-primary));
}

.button-primary:hover {
    background-color: rgb(var(--color-primary-hover));
}

/* Or with Tailwind's arbitrary values */
<button class="bg-[rgb(var(--color-primary))]">
    Click me
</button>

Tailwind Configuration

Extending the Theme

Customize Tailwind in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],

    theme: {
        extend: {
            colors: {
                primary: {
                    50: '#eff6ff',
                    100: '#dbeafe',
                    200: '#bfdbfe',
                    300: '#93c5fd',
                    400: '#60a5fa',
                    500: '#3b82f6',
                    600: '#2563eb',
                    700: '#1d4ed8',
                    800: '#1e40af',
                    900: '#1e3a8a',
                },
                // Add your brand colors
                brand: {
                    light: '#your-light-color',
                    DEFAULT: '#your-brand-color',
                    dark: '#your-dark-color',
                },
            },

            fontFamily: {
                sans: ['Inter', 'system-ui', 'sans-serif'],
                heading: ['Poppins', 'system-ui', 'sans-serif'],
                mono: ['JetBrains Mono', 'monospace'],
            },

            spacing: {
                '18': '4.5rem',
                '88': '22rem',
                '128': '32rem',
            },

            borderRadius: {
                '4xl': '2rem',
            },

            boxShadow: {
                'card': '0 2px 8px -2px rgba(0, 0, 0, 0.1)',
                'card-hover': '0 8px 24px -4px rgba(0, 0, 0, 0.15)',
            },
        },
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

Typography

Adding Custom Fonts

Add fonts in resources/views/layouts/app.blade.php:

<head>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
</head>

Typography Scale

/* resources/css/typography.css */

.text-display {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.text-h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.text-h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.25;
}

.text-h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.text-body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
}

.text-small {
    font-size: 0.875rem;
    line-height: 1.5;
}

.text-caption {
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgb(var(--color-text-muted));
}

Component Customization

Blade Components

Override default components by publishing and editing them:

# Publish components
php artisan vendor:publish --tag=socialapparatus-components

# Components are now in resources/views/components/

Button Component Example

<!-- resources/views/components/button.blade.php -->



<button
    type="button"
    class="inline-flex items-center justify-center font-medium rounded-lg
                    transition-all duration-200 focus:outline-none focus:ring-2
                    focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-4 py-2 text-base"
>
    {{ $slot }}
</button>

<!-- Usage -->
<x-button variant="primary" size="lg">Click me</x-button>
<x-button variant="outline">Cancel</x-button>
<x-button variant="danger">Delete</x-button>

Card Component Example

<!-- resources/views/components/card.blade.php -->



<div class="bg-white rounded-xl border border-gray-200 p-6 shadow-card">
    {{ $slot }}
</div>

Layout Customization

Main Layout

Edit resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="CWxxVVS3D8vAtD7cJTwrfywafHjdP00JAgW3EeUp">

    <title>Laravel</title>

        </head>
<body class="min-h-screen bg-gray-50 text-gray-900 antialiased">
    <!-- Navigation -->
    @include('partials.navigation')

    <!-- Main Content -->
    <main class="pt-16">
        {{ $slot }}
    </main>

    <!-- Footer -->
    @include('partials.footer')

    </body>
</html>

Navigation Customization

<!-- resources/views/partials/navigation.blade.php -->

<nav class="fixed top-0 inset-x-0 h-16 bg-white border-b border-gray-200 z-50">
    <div class="container mx-auto px-4 h-full flex items-center justify-between">
        <!-- Logo -->
        <a href="/" class="flex items-center gap-2">
            <img src="https://socialapparatus.com/images/logo.svg" alt="" class="h-8">
            <span class="font-heading font-bold text-xl">Laravel</span>
        </a>

        <!-- Navigation Links -->
        <div class="hidden md:flex items-center gap-6">
            <a href="/explore" class="text-gray-600 hover:text-gray-900">Explore</a>
            <a href="/groups" class="text-gray-600 hover:text-gray-900">Groups</a>
            <a href="/members" class="text-gray-600 hover:text-gray-900">Members</a>
        </div>

        <!-- User Menu -->
        <div class="flex items-center gap-4">
                            <a href="/login" class="text-gray-600">Log in</a>
                <x-button href="/register">Sign up</x-button>
                    </div>
    </div>
</nav>

Dark Mode

Toggle Implementation

// resources/js/theme.js

function getTheme() {
    return localStorage.getItem('theme') ||
        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
}

function setTheme(theme) {
    localStorage.setItem('theme', theme);
    document.documentElement.setAttribute('data-theme', theme);
}

// Initialize
setTheme(getTheme());

// Toggle button
document.getElementById('theme-toggle')?.addEventListener('click', () => {
    setTheme(getTheme() === 'dark' ? 'light' : 'dark');
});

Dark Mode Styles

/* Automatic dark mode based on data-theme attribute */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    @apply bg-slate-900 text-slate-100;
}

[data-theme="dark"] .card {
    @apply bg-slate-800 border-slate-700;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea {
    @apply bg-slate-800 border-slate-600 text-white;
}

Logo & Branding

Replacing the Logo

Place your logo files in public/images/:

logo.svg - Main logo (recommended: SVG)
logo-dark.svg - Logo for dark backgrounds
favicon.ico - Browser favicon
apple-touch-icon.png - iOS home screen icon (180x180)

Open Graph Images

<!-- resources/views/layouts/app.blade.php -->
<meta property="og:image" content="https://socialapparatus.com/images/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Custom CSS

Adding Custom Styles

Create a custom stylesheet:

/* resources/css/custom.css */

/* Your custom styles */
.hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Animation classes */
.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

Import in resources/css/app.css:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import 'custom.css';

Building Assets

# Development (with hot reload)
npm run dev

# Production build
npm run build

Theme Presets

SocialApparatus includes several pre-built theme presets:

Preset	Description
Default	Clean, modern blue theme
Minimal	Black and white, typography-focused
Vibrant	Colorful gradients and bold colors
Corporate	Professional, enterprise-ready look

# Switch theme presets
php artisan theme:use minimal

# List available presets
php artisan theme:list

# Create custom preset
php artisan theme:create my-custom-theme