Black Dashboard

Black Dashboard#

Black Dashboard is a premium Bootstrap 4/5 admin template designed by Creative-Tim. It features a dark-themed design language with vibrant accent colors and a modern, sleek interface ideal for modern web applications and admin panels.

👉 New to App-Generator? Sign IN with GitHub or Generate Web Apps in no time (free service).

Black Dashboard - open-source dashboard template provided by Creative-Tim

Available Versions#

  • Bootstrap 4/5 (Free & PRO)

  • React.js

  • Vue.js

  • Angular

  • Laravel

  • Node.js

Key Features#

  • Dark theme design

  • Bootstrap 4/5 Framework

  • SCSS files included

  • Responsive layout

  • Custom dark-themed components

  • Gradient cards and backgrounds

  • Premium plugins integration

  • Regular updates

  • MIT License (Free version)

Technical Stack#

  • Frontend Framework: Bootstrap 4/5

  • CSS Preprocessor: SASS/SCSS

  • JavaScript: jQuery

  • Charts: Chart.js

  • Icons: Nucleo Icons & Font Awesome

  • Notifications: Bootstrap Notify

  • Perfect Scrollbar: Custom scrollbars

Directory Structure#

black-dashboard/
    ├── assets/
    │   ├── css/
    │   │   ├── black-dashboard.css
    │   │   └── black-dashboard.min.css
    │   ├── demo/
    │   ├── fonts/
    │   ├── img/
    │   ├── js/
    │   │   ├── core/
    │   │   ├── plugins/
    │   │   ├── black-dashboard.js
    │   │   └── black-dashboard.min.js
    │   └── scss/
    │       ├── black-dashboard.scss
    │       └── black-dashboard/
    │           ├── bootstrap/
    │           ├── custom/
    │           └── plugins/
    ├── docs/
    ├── examples/
    └── gulpfile.js

Core Components#

1. Basic Layout Structure#

<body class="dark-theme">
    <!-- Sidebar -->
    <div class="sidebar">
        <div class="sidebar-wrapper">
        <!-- Sidebar content -->
        </div>
    </div>

    <div class="main-panel">
        <!-- Navbar -->
        <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent">

        </nav>

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <!-- Page content -->
            </div>
        </div>
    </div>
</body>

3. Card Components#

Gradient Card#

<div class="card card-chart">
    <div class="card-header">
        <h4 class="card-title">Gradient Card</h4>
        <div class="dropdown">
        <button type="button" class="btn btn-link dropdown-toggle btn-icon">
            <i class="tim-icons icon-settings-gear-63"></i>
        </button>
        </div>
    </div>
    <div class="card-body">
        <div class="chart-area">
        <canvas id="chartBig1"></canvas>
        </div>
    </div>
</div>

Stat Card#

<div class="card card-stats">
    <div class="card-body">
        <div class="row">
        <div class="col-5">
            <div class="info-icon text-center icon-warning">
            <i class="tim-icons icon-chat-33"></i>
            </div>
        </div>
        <div class="col-7">
            <div class="numbers">
            <p class="card-category">Number</p>
            <h3 class="card-title">150GB</h3>
            </div>
        </div>
        </div>
    </div>
</div>

Theme Customization#

1. SCSS Variables#

// Core Colors
$default: #344675;
$primary: #e14eca;
$secondary: #f4f5f7;
$success: #00f2c3;
$info: #1d8cf8;
$warning: #ff8d72;
$danger: #fd5d93;

// Background Colors
$background-black: #1e1e2f;
$background-states-black: #1e1e24;

// Card Variables
$card-black-background: #27293d;
$card-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1);

// Sidebar Variables
$sidebar-width: 260px;
$sidebar-mini-width: 80px;

2. Theme Modes#

// Theme toggle functionality
function toggleTheme() {
    const body = document.getElementsByTagName('body')[0];
    if (body.classList.contains('white-content')) {
        body.classList.remove('white-content');
    } else {
        body.classList.add('white-content');
    }
}

Charts Integration#

1. Chart.js Configuration#

var ctx = document.getElementById('chartBig1').getContext('2d');
var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
gradientStroke.addColorStop(1, 'rgba(72,72,176,0.1)');
gradientStroke.addColorStop(0.4, 'rgba(72,72,176,0.0)');
gradientStroke.addColorStop(0, 'rgba(119,52,169,0)');

var config = {
type: 'line',
data: {
    labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL'],
    datasets: [{
        label: "Data",
        fill: true,
        backgroundColor: gradientStroke,
        borderColor: '#d346b1',
        borderWidth: 2,
        borderDash: [],
        borderDashOffset: 0.0,
        pointBackgroundColor: '#d346b1',
        pointBorderColor: 'rgba(255,255,255,0)',
        pointHoverBackgroundColor: '#d346b1',
        pointBorderWidth: 20,
        pointHoverRadius: 4,
        pointHoverBorderWidth: 15,
        pointRadius: 4,
        data: [80, 160, 200, 160, 250, 280, 220]
    }]
},
options: {
    // Chart options
}
};