Documentation

<!DOCTYPE html>
<html lang="en">
<head>
    @@include('partials/title-meta.html', {"title": "Dashboard"})
    @@include('partials/header.html', {"page": "index"})
</head>
<body>
    <!-- Main Content Container Wrapper -->
    <div class="main-wrapper">
        @@include('partials/topbar.html')
        @@include('partials/sidebar.html')

        <!-- Page Wrapper: Contains Main Content and Footer -->
        <div class="page-wrapper">
            <main>
                <div class="p-3 lg:py-6 lg:px-0">
                    <!-- Page modules content goes here -->
                </div>
            </main>
            @@include('partials/footer.html')
        </div>
    </div>

    @@include('partials/script.html', {"page": "index"})
</body>
</html>

1. Core Theme Scripts

All core dynamics and theme actions are handled by the main script file, included in src/partials/script.html:

<script type="module" src="assets/js/script.js"></script>

2. Direct Script Calling (Page-Specific)

For page-specific libraries, custom plugins, or charts (such as Apex Charts, Flatpickr), scripts are called directly in src/partials/script.html by specifying their paths. Examples include:

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 src/assets/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: src/partials/topbar.html and src/partials/sidebar.html, and search for the logo tags to modify their src attribute:

The default typography font for the template :

Open the style file src/assets/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=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");


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

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

@theme {
    --color-background: #f2f0e8;
    --color-foreground: #16292e;
    --color-primary: #1f786f;
    --color-primary-hover: #195e58;
}