Documentation

You can easily update the logo in two ways:

Option 1: Overwrite Logo Image Files (Recommended)

Directly replace the default SVG logo files in the resources/img/ directory with your own logos using the same file names:

• logo.svg: Main logo (shown in light mode).
• logo-small.svg: Small square logo (shown when sidebar is collapsed/minimized).
• logo-white.svg: White text logo (shown in dark mode).

Option 2: Update HTML Templates

If you want to use different names or paths, open the template partial files: resources/views/partials/topbar.blade.php and resources/views/partials/sidebar.blade.php, and search for the logo tags to modify their src attribute:

Topbar Logo Structure (topbar.blade.php):

<a href="{{url('index')}}" class="logo">
    <span class="logo-light">
        <span class="logo-lg"><img src="{{URL::asset('build/img/logo.svg')}}" alt="logo"></span>
        <span class="logo-sm"><img src="{{URL::asset('build/img/logo-small.svg')}}" alt="small logo"></span>
    </span>
    <span class="logo-dark">
        <span class="logo-lg"><img src="{{URL::asset('build/img/logo-white.svg')}}" alt="dark logo"></span>
    </span>
</a>

Sidebar Logo Structure (sidebar.blade.php):

<a href="{{url('index')}}" class="logo logo-normal">
    <img src="{{URL::asset('build/img/logo.svg')}}" alt="Logo">
</a>
<a href="{{url('index')}}" class="logo-small">
    <img src="{{URL::asset('build/img/logo-small.svg')}}" alt="Logo">
</a>
<a href="{{url('index')}}" class="dark-logo">
    <img src="{{URL::asset('build/img/logo-white.svg')}}" alt="Logo">
</a>

The default typography font for the template is Geist. If you want to change it to another Google font (like Inter or Roboto):

Open the style file resources/css/style.css and update the @import statement at the top of the file as well as the primary font variable in the @theme configuration block:

/* 1. Import the new Google Font at the very top of style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 2. Update the variable inside the @theme block */
@theme {
    --font-family-primary: "Inter", sans-serif;
}

All theme colors are defined as design tokens under the @theme directive in your resources/css/style.css file. These variables control the look and feel of components:

@theme {
    --color-primary: #0F766E;   /* primary color */
    --color-secondary: #2563EB; /* secondary color */
    --color-success: #059669;   /* success states */
    --color-warning: #D97706;   /*  warnings */
    --color-danger: #B91C1C;    /*  error states */
}

Changing Element Colors

You can customize the color of any element by editing its class or variable assignment in the CSS file. For example, changing the header topbar background color:

.navbar-header { 
    @apply bg-(--topbar-bg);
}