Neon Glass - Bootstrap 5 Custom Theme

This is a custom Bootstrap 5 theme featuring a "Neon Glass" aesthetic with dark mode, glassmorphism effects, and glowing borders.

Features

• Dark Mode Base: Deep dark background colors.
• Glassmorphism: Translucent cards with blur effects.
• Neon Glow: Cyan/Blue glowing borders and text accents.
• Custom Components:
  • .neon-card: Glass cards with hover effects.
  • .audio-viz: Animated audio visualizer bars.
  • Customized standard Bootstrap components (Buttons, Inputs, Cards).

Project Structure

• src/scss/: SASS source files.
  • _variables.scss: Bootstrap variable overrides.
  • _custom.scss: Custom theme styles and mixins.
  • styles.scss: Main entry point importing Bootstrap.
• dist/css/: Compiled CSS.
• public/: Static assets (images).
• index.html: Landing page example.
• components.html: Component showcase.

Usage

1. Install Dependencies:

   npm install

2. Build CSS:

   npm run build:css

3. Watch for Changes:

   npm run watch:css

4. Verify/Screenshot: (Requires Playwright installed in python environment)

   python3 verify_theme.py

Screenshots

Landing Page

Components