Matrix Bootstrap 5 Theme

A full-blown, "Matrix"-inspired theme for Bootstrap 5. This theme overrides Bootstrap's default variables and adds custom styles to create a dark, hacker-style interface with glowing green text, terminal fonts, and a digital rain background effect.

Features

• Dark Mode by Default: Deep black backgrounds (#0d0d0d).
• Matrix Green Palette: Primary colors set to vibrant Matrix greens (#00FF41).
• Typography: Uses 'VT323' (a terminal-like font) from Google Fonts.
• Components: Customized Buttons, Cards, Forms, Modals, Navbar, and Tables.
• Digital Rain: A canvas-based background effect included in js/matrix-effect.js.

Usage

Quick Start

1. Clone or download this repository.
2. Open public/index.html in your web browser to see the example website and component library.

Installation in your project

1. Copy the public/css/matrix-theme.css file to your project.
2. Include it in your HTML after the Bootstrap CSS link:

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Matrix Theme -->
<link href="css/matrix-theme.css" rel="stylesheet">

3. (Optional) For the background rain effect, copy public/js/matrix-effect.js and include:

<canvas id="matrix-canvas"></canvas>
<!-- ... other content ... -->
<script src="js/matrix-effect.js"></script>

And ensure the canvas is styled to cover the background (this is already handled in matrix-theme.css).

Customization

This theme uses CSS Variables (Custom Properties) to override Bootstrap defaults. You can easily tweak the colors in public/css/matrix-theme.css:

:root {
  --matrix-black: #0d0d0d;
  --matrix-green: #00ff41;
  /* ... */
}

Structure

• public/index.html: The example website showcasing the theme.
• public/css/matrix-theme.css: The core theme file.
• public/js/matrix-effect.js: The Javascript for the background effect.