Skip to content

Latest commit

 

History

History
1543 lines (1284 loc) · 39.8 KB

dark-mode-composition-patterns.md

File metadata and controls

1543 lines (1284 loc) · 39.8 KB

🎨 Dark Mode Component Composition Patterns

Real-world examples of combining the 54 dark mode components into complete interfaces.

Last Updated: March 11, 2026 Theme Version: 2.0.0


📋 Table of Contents

  1. Dashboard Layout

  2. Blog Post Page

  3. Portfolio Gallery

  4. Landing Page

  5. Settings Page

  6. Authentication Flow

  7. Content Management

  8. E-commerce Product Page

  9. User Profile

  10. Event Detail Page


🎯 Dashboard Layout

Complete Admin Dashboard

Combines: Sidebar + Header + Cards + Progress Bars + Stats + Charts

<!DOCTYPE html>
<html class="dark">
<head>
  <title>Admin Dashboard</title>
  <link rel="stylesheet" href="/styles/globals.css">
  <link rel="stylesheet" href="/styles/themes/dark.css">
  <link rel="stylesheet" href="/styles/themes/dark-extended.css">
</head>
<body>
  <!-- App Container -->
  <div class="app-container">

    <!-- Sidebar Navigation -->
    <aside class="sidebar">
      <div class="sidebar__header">
        <h2>Dashboard</h2>
      </div>

      <div class="sidebar__section">
        <a href="/dashboard" class="sidebar_*link sidebar*_link--active">
          <svg class="sidebar__icon"><!-- Home icon --></svg>
          Overview
        </a>
        <a href="/analytics" class="sidebar__link">
          <svg class="sidebar__icon"><!-- Chart icon --></svg>
          Analytics
        </a>
        <a href="/content" class="sidebar__link">
          <svg class="sidebar__icon"><!-- File icon --></svg>
          Content
        </a>
        <a href="/settings" class="sidebar__link">
          <svg class="sidebar__icon"><!-- Gear icon --></svg>
          Settings
        </a>
      </div>
    </aside>

    <!-- Main Content Area -->
    <main class="main-content">

      <!-- Header with Breadcrumbs -->
      <header class="header">
        <nav class="breadcrumbs">
          <a href="/" class="breadcrumbs__link">Home</a>
          <span class="breadcrumbs__separator">/</span>
          <span class="breadcrumbs__current">Dashboard</span>
        </nav>

        <div class="header__actions">
          <div class="search">
            <input
              type="search"
              class="search__input"
              placeholder="Search..."
            />
            <button class="search__button">
              <svg><!-- Search icon --></svg>
            </button>
          </div>

          <button class="button button--primary">
            New Project
          </button>
        </div>
      </header>

      <!-- Stats Grid -->
      <div class="stats-grid">
        <div class="card">
          <h3 class="card__title">Total Users</h3>
          <p class="card__stat">12,458</p>
          <div class="progress">
            <div class="progress_*bar progress*_bar--success" style="width: 85%;"></div>
          </div>
          <p class="card__change">+15% from last month</p>
        </div>

        <div class="card">
          <h3 class="card__title">Revenue</h3>
          <p class="card__stat">$48,592</p>
          <div class="progress">
            <div class="progress__bar" style="width: 62%;"></div>
          </div>
          <p class="card__change">+8% from last month</p>
        </div>

        <div class="card">
          <h3 class="card__title">Active Projects</h3>
          <p class="card__stat">23</p>
          <div class="progress">
            <div class="progress_*bar progress*_bar--warning" style="width: 45%;"></div>
          </div>
          <p class="card__change">-3% from last month</p>
        </div>

        <div class="card">
          <h3 class="card__title">Conversion Rate</h3>
          <p class="card__stat">3.2%</p>
          <div class="progress">
            <div class="progress_*bar progress*_bar--error" style="width: 32%;"></div>
          </div>
          <p class="card__change">-12% from last month</p>
        </div>
      </div>

      <!-- Recent Activity -->
      <div class="card">
        <h3 class="card__title">Recent Activity</h3>

        <div class="timeline">
          <div class="timeline__item">
            <div class="timeline__marker"></div>
            <div class="timeline__content">
              <h4 class="timeline__title">New user registered</h4>
              <p class="timeline__date">2 minutes ago</p>
              <p>john.doe@example.com joined the platform</p>
            </div>
          </div>

          <div class="timeline__item">
            <div class="timeline__marker"></div>
            <div class="timeline__content">
              <h4 class="timeline__title">Project completed</h4>
              <p class="timeline__date">1 hour ago</p>
              <p>"Website Redesign" marked as complete</p>
            </div>
          </div>

          <div class="timeline__item">
            <div class="timeline__marker"></div>
            <div class="timeline__content">
              <h4 class="timeline__title">Payment received</h4>
              <p class="timeline__date">3 hours ago</p>
              <p>$1,250 payment from Client XYZ</p>
            </div>
          </div>
        </div>
      </div>

    </main>

  </div>

  <!-- Toast Notification -->
  <div class="toast toast--success">
    <p>✓ Dashboard data updated successfully!</p>
    <button class="toast__close">×</button>
  </div>

</body>
</html>

```text

## CSS for Grid Layout

```css
/* Custom dashboard grid */
.app-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.card__stat {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--color-neon-pink);
  margin: 0.5rem 0;
}

.card__change {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .app-container {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none; /* Mobile menu toggle required */
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}

```text

---

## 📝 Blog Post Page

### Complete Article Layout

Combines: **Breadcrumbs + Typography + Author Bio + Comments + Share + Tags**

```html
<article class="blog-post">

  <!-- Breadcrumbs -->
  <nav class="breadcrumbs">
    <a href="/" class="breadcrumbs__link">Home</a>
    <span class="breadcrumbs__separator">/</span>
    <a href="/blog" class="breadcrumbs__link">Blog</a>
    <span class="breadcrumbs__separator">/</span>
    <span class="breadcrumbs__current">Article Title</span>
  </nav>

  <!-- Article Header -->
  <header class="blog-post__header">
    <h1>The complete guide to dark mode design</h1>
    <div class="blog-post__meta">
      <time datetime="2026-03-11">March 11, 2026</time>
      <span>•</span>
      <span>8 min read</span>
      <span>•</span>
      <span class="badge badge--primary">Design</span>
    </div>
  </header>

  <!-- Featured Image -->
  <figure>
    <img src="/featured-image.jpg" alt="Dark mode UI showcase" />
    <figcaption>Modern dark mode interface examples</figcaption>
  </figure>

  <!-- Article Content -->
  <div class="blog-post__content">
    <h2>Introduction</h2>
    <p>
      Dark mode has become an essential feature in modern web design...
    </p>

    <blockquote>
      "Dark mode isn't just a trend—it's a fundamental shift
      in how we approach digital interfaces."
    </blockquote>

    <h3>Key principles</h3>
    <ul>
      <li>Reduce eye strain with proper contrast ratios</li>
      <li>Use neon accents sparingly for visual hierarchy</li>
      <li>Maintain WCAG AA compliance across all components</li>
      <li>Test with real users in low-light environments</li>
    </ul>

    <h3>Color palette selection</h3>
    <p>
      When choosing colors for dark mode, consider both aesthetics
      and accessibility...
    </p>

    <pre><code>/* Example dark mode variables */
:root.dark {
  --bg-primary: #0F0F0F;
  --text-primary: #F6F2EB;
  --accent: #FF3AAE;
}</code></pre>

    <h2>Implementation tips</h2>
    <ol>
      <li>Start with a solid color foundation</li>
      <li>Define consistent spacing and typography</li>
      <li>Add neon effects strategically</li>
      <li>Test across multiple devices</li>
    </ol>

    <div class="alert alert--info">
      <strong>Pro tip:</strong> Always test your dark mode with
      actual users to identify readability issues.
    </div>
  </div>

  <!-- Tags -->
  <div class="blog-post__tags">
    <div class="chip">
      <span>Design System</span>
    </div>
    <div class="chip">
      <span>Dark Mode</span>
    </div>
    <div class="chip">
      <span>Accessibility</span>
    </div>
    <div class="chip">
      <span>UI/UX</span>
    </div>
  </div>

  <!-- Share Component -->
  <div class="blog-post__share">
    <h3>Share this article</h3>
    <div class="social-buttons">
      <button class="social-button social-button--twitter">
        <svg><!-- Twitter icon --></svg>
        Twitter
      </button>
      <button class="social-button social-button--facebook">
        <svg><!-- Facebook icon --></svg>
        Facebook
      </button>
      <button class="social-button">
        <svg><!-- Link icon --></svg>
        Copy Link
      </button>
    </div>
  </div>

  <!-- Author Bio -->
  <div class="author-bio">
    <img
      src="/author-avatar.jpg"
      alt="Ash Shaw"
      class="author-bio__avatar"
    />
    <div class="author-bio__content">
      <h3 class="author-bio__name">Ash Shaw</h3>
      <p class="author-bio__title">UV Makeup Artist & Web Developer</p>
      <p class="author-bio__description">
        Cape Town-based artist specializing in neon UV makeup
        and progressive web applications. Living between festivals,
        code, and creativity.
      </p>
      <a href="/about" class="author-bio__link">
        Read more about Ash →
      </a>
    </div>
  </div>

  <!-- Comments Section -->
  <div class="comments">
    <h3>Comments (3)</h3>

    <div class="comment">
      <div class="comment__header">
        <img src="/avatar1.jpg" alt="User" class="comment__avatar" />
        <div>
          <p class="comment__author">Jane Doe</p>
          <p class="comment__date">2 hours ago</p>
        </div>
      </div>
      <div class="comment__body">
        <p>
          Excellent guide! The neon color examples are particularly helpful.
        </p>
      </div>
      <button class="comment__reply">Reply</button>
    </div>

    <!-- Nested Reply -->
    <div class="comment comment--reply">
      <div class="comment__header">
        <img src="/avatar-ash.jpg" alt="Ash" class="comment__avatar" />
        <div>
          <p class="comment__author">Ash Shaw</p>
          <p class="comment__date">1 hour ago</p>
        </div>
      </div>
      <div class="comment__body">
        <p>
          Thanks Jane! Glad you found it useful. Let me know if you
          need help implementing it.
        </p>
      </div>
    </div>

    <div class="comment">
      <div class="comment__header">
        <img src="/avatar2.jpg" alt="User" class="comment__avatar" />
        <div>
          <p class="comment__author">John Smith</p>
          <p class="comment__date">5 hours ago</p>
        </div>
      </div>
      <div class="comment__body">
        <p>
          The accessibility section is spot on. More designers need
          to prioritize contrast ratios.
        </p>
      </div>
      <button class="comment__reply">Reply</button>
    </div>

  </div>

</article>

```text

---

## 🖼️ Portfolio Gallery

### Filterable Image Gallery with Lightbox

Combines: **Filters + Gallery + Lightbox + Pagination + Empty State**

```html
<div class="portfolio-page">

  <!-- Page Header -->
  <header class="portfolio-page__header">
    <h1>UV Makeup Portfolio</h1>
    <p>
      Neon creations from festivals around the world
    </p>
  </header>

  <!-- Filter Pills -->
  <div class="filter-list">
    <button class="filter filter--active">All (42)</button>
    <button class="filter">Festivals (28)</button>
    <button class="filter">Berlin Clubs (8)</button>
    <button class="filter">Editorial (6)</button>
  </div>

  <!-- Gallery Grid -->
  <div class="gallery">
    <div class="gallery__item">
      <img src="/portfolio/img1.jpg" alt="UV makeup at Origin Festival" />
      <div class="gallery__overlay">
        <h3>Origin Festival 2026</h3>
        <p>Full-face neon mandala design</p>
      </div>
    </div>

    <div class="gallery__item">
      <img src="/portfolio/img2.jpg" alt="Berlin warehouse party" />
      <div class="gallery__overlay">
        <h3>Berghain UV Night</h3>
        <p>Geometric face patterns</p>
      </div>
    </div>

    <div class="gallery__item">
      <img src="/portfolio/img3.jpg" alt="Editorial shoot" />
      <div class="gallery__overlay">
        <h3>Neon Architecture Series</h3>
        <p>Experimental editorial concept</p>
      </div>
    </div>

    <!-- More items... -->
  </div>

  <!-- Pagination -->
  <nav class="pagination">
    <button class="pagination_*link pagination*_link--disabled" disabled>
      ← Previous
    </button>
    <button class="pagination_*link pagination*_link--active">1</button>
    <button class="pagination__link">2</button>
    <button class="pagination__link">3</button>
    <button class="pagination__link">
      Next →
    </button>
  </nav>

  <!-- Lightbox (hidden by default) -->
  <div class="lightbox" style="display: none;">
    <img
      src="/portfolio/img1-full.jpg"
      alt="Full size image"
      class="lightbox__image"
    />

    <p class="lightbox__caption">
      Origin Festival 2026 — Full-face neon mandala design
    </p>

    <button class="lightbox__close" aria-label="Close lightbox">×</button>
<button class="lightbox_*nav lightbox*_nav--prev"
aria-label="Previous">‹</button>
    <button class="lightbox_*nav lightbox*_nav--next" aria-label="Next">›</button>
  </div>

</div>

```text

## Custom Gallery CSS

```css
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}

.gallery__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(15, 15, 15, 0.95) 100%
  );
  padding: 1.5rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.gallery_*item:hover .gallery*_overlay {
  transform: translateY(0);
}

.gallery__overlay h3 {
  color: #FF3AAE;
  margin: 0 0 0.5rem 0;
}

.gallery__overlay p {
  color: #CFC7BB;
  margin: 0;
  font-size: 0.875rem;
}

```text

---

## 🎯 Landing Page

### Hero Section with CTA and Features

Combines: **Hero + CTA + Cards + Testimonials + Newsletter**

```html
<div class="landing-page">

  <!-- Hero Section -->
  <section class="hero">
    <div class="hero__content">
      <h1 class="hero__title">
        Neon makeup meets <span class="text-gradient">digital art</span>
      </h1>
      <p class="hero__description">
        UV makeup artistry for festivals, clubs, and editorial projects.
        Based in Cape Town, creating worldwide.
      </p>

      <div class="button-group">
        <button class="button button--primary">
          View Portfolio
        </button>
        <button class="button button--secondary">
          Learn More
        </button>
      </div>
    </div>

    <div class="hero__image">
      <img src="/hero-uv-makeup.jpg" alt="Neon UV makeup showcase" />
    </div>
  </section>

  <!-- Stats Bar -->
  <section class="stats-bar">
    <div class="stat">
      <p class="stat__number">500+</p>
      <p class="stat__label">Festivals</p>
    </div>
    <div class="stat">
      <p class="stat__number">15</p>
      <p class="stat__label">Countries</p>
    </div>
    <div class="stat">
      <p class="stat__number">10K+</p>
      <p class="stat__label">Faces Painted</p>
    </div>
    <div class="stat">
      <p class="stat__number">7</p>
      <p class="stat__label">Years Experience</p>
    </div>
  </section>

  <!-- Features Grid -->
  <section class="features">
    <h2>What I offer</h2>

    <div class="features__grid">
      <div class="card">
        <svg class="card__icon"><!-- Festival icon --></svg>
        <h3 class="card__title">Festival makeup</h3>
        <p class="card__description">
          UV reactive designs that glow under blacklight.
          Perfect for psytrance festivals and raves.
        </p>
      </div>

      <div class="card">
        <svg class="card__icon"><!-- Club icon --></svg>
        <h3 class="card__title">Berlin club scene</h3>
        <p class="card__description">
          Geometric patterns and bold neon looks for
          warehouse parties and techno clubs.
        </p>
      </div>

      <div class="card">
        <svg class="card__icon"><!-- Camera icon --></svg>
        <h3 class="card__title">Editorial projects</h3>
        <p class="card__description">
          Experimental concepts pushing the boundaries
          of neon makeup artistry.
        </p>
      </div>
    </div>
  </section>

  <!-- Testimonials -->
  <section class="testimonials">
    <h2>What people say</h2>

    <div class="testimonials__grid">
      <div class="testimonial">
        <div class="rating">
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
        </div>

        <blockquote class="testimonial__quote">
          "Ash's UV makeup took my festival experience to
          another level. The designs are absolutely stunning!"
        </blockquote>

        <div class="testimonial__author">
          <img src="/avatar1.jpg" class="testimonial__avatar" alt="Sarah" />
          <div>
            <p class="testimonial__author">Sarah K.</p>
            <p class="testimonial__role">Origin Festival 2026</p>
          </div>
        </div>
      </div>

      <div class="testimonial">
        <div class="rating">
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
        </div>

        <blockquote class="testimonial__quote">
          "Professional, creative, and the results speak
          for themselves. Highly recommend!"
        </blockquote>

        <div class="testimonial__author">
          <img src="/avatar2.jpg" class="testimonial__avatar" alt="Marcus" />
          <div>
            <p class="testimonial__author">Marcus T.</p>
            <p class="testimonial__role">Berghain UV Night</p>
          </div>
        </div>
      </div>

      <div class="testimonial">
        <div class="rating">
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
          <span class="rating_*star rating*_star--filled">★</span>
        </div>

        <blockquote class="testimonial__quote">
          "The attention to detail is incredible. Every design
          tells a story."
        </blockquote>

        <div class="testimonial__author">
          <img src="/avatar3.jpg" class="testimonial__avatar" alt="Luna" />
          <div>
            <p class="testimonial__author">Luna M.</p>
            <p class="testimonial__role">Solipse Festival</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="cta">
    <h2 class="cta__title">Ready for your neon transformation?</h2>
    <p class="cta__description">
      Book me for your next festival, event, or editorial project.
    </p>

    <button class="button button--primary button--large">
      Get in Touch
    </button>
  </section>

  <!-- Newsletter Signup -->
  <section class="newsletter">
    <h3 class="newsletter__title">Stay in the loop</h3>
    <p class="newsletter__description">
      Get updates on festivals, new designs, and UV makeup tips.
    </p>

    <form class="newsletter__form">
      <input
        type="email"
        class="newsletter__input"
        placeholder="your@email.com"
        required
      />
      <button type="submit" class="button button--primary">
        Subscribe
      </button>
    </form>
  </section>

</div>

```text

---

## ⚙️ Settings Page

### User Settings with Tabs and Forms

Combines: **Tabs + Forms + Switches + Alerts + Buttons**

```html
<div class="settings-page">

  <h1>Account Settings</h1>

  <!-- Tabs -->
  <div class="tabs">
    <div class="tabs__list">
      <button class="tabs_*button tabs*_button--active">
        Profile
      </button>
      <button class="tabs__button">
        Preferences
      </button>
      <button class="tabs__button">
        Notifications
      </button>
      <button class="tabs__button">
        Security
      </button>
    </div>

    <!-- Profile Tab Panel -->
    <div class="tabs__panel">

      <div class="alert alert--info">
        <strong>Note:</strong> Changes to your profile are saved automatically.
      </div>

      <form class="form">
        <div class="form__group">
          <label class="form__label" for="name">Full Name</label>
          <input
            type="text"
            id="name"
            class="form__input"
            value="Ash Shaw"
          />
        </div>

        <div class="form__group">
          <label class="form__label" for="email">Email Address</label>
          <input
            type="email"
            id="email"
            class="form__input"
            value="ash@example.com"
          />
        </div>

        <div class="form__group">
          <label class="form__label" for="bio">Bio</label>
          <textarea
            id="bio"
            class="form__textarea"
            rows="4"
          >UV makeup artist based in Cape Town...</textarea>
        </div>

        <div class="form__group">
          <label class="form__label" for="location">Location</label>
          <select id="location" class="form__select">
            <option>Cape Town, South Africa</option>
            <option>Berlin, Germany</option>
            <option>Koh Phangan, Thailand</option>
          </select>
        </div>

        <div class="form__group">
          <label class="form__label">Profile Visibility</label>
          <div class="form__radio-group">
            <label class="form__radio">
              <input type="radio" name="visibility" value="public" checked />
              <span>Public</span>
            </label>
            <label class="form__radio">
              <input type="radio" name="visibility" value="private" />
              <span>Private</span>
            </label>
            <label class="form__radio">
              <input type="radio" name="visibility" value="friends" />
              <span>Friends Only</span>
            </label>
          </div>
        </div>

        <div class="button-group">
          <button type="submit" class="button button--primary">
            Save Changes
          </button>
          <button type="button" class="button button--secondary">
            Cancel
          </button>
        </div>
      </form>

    </div>
  </div>

  <!-- Preferences Panel (hidden) -->
  <div class="tabs__panel" style="display: none;">

    <h3>Display Preferences</h3>

    <div class="preference-item">
      <div class="preference-item__content">
        <h4>Dark Mode</h4>
        <p>Use dark theme across the application</p>
      </div>
      <label class="switch">
        <input type="checkbox" checked />
        <span class="switch__slider"></span>
      </label>
    </div>

    <div class="preference-item">
      <div class="preference-item__content">
        <h4>Neon Effects</h4>
        <p>Enable glow and animation effects</p>
      </div>
      <label class="switch">
        <input type="checkbox" checked />
        <span class="switch__slider"></span>
      </label>
    </div>

    <div class="preference-item">
      <div class="preference-item__content">
        <h4>Reduce Motion</h4>
        <p>Minimize animations for accessibility</p>
      </div>
      <label class="switch">
        <input type="checkbox" />
        <span class="switch__slider"></span>
      </label>
    </div>

    <div class="preference-item">
      <div class="preference-item__content">
        <h4>Auto-play Videos</h4>
        <p>Automatically play videos when visible</p>
      </div>
      <label class="switch">
        <input type="checkbox" checked />
        <span class="switch__slider"></span>
      </label>
    </div>

  </div>

</div>

```text

## Custom Settings CSS

```css
.preference-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid #333333;
}

.preference-item:last-child {
  border-bottom: none;
}

.preference-item__content h4 {
  color: #FFFFFF;
  margin: 0 0 0.25rem 0;
}

.preference-item__content p {
  color: #CFC7BB;
  margin: 0;
  font-size: 0.875rem;
}

```text

---

## 🔐 Authentication Flow

### Login and Registration Forms

Combines: **Forms + Alerts + Buttons + Loading Spinners + Validation**

```html
<!-- Login Modal -->
<div class="modal">
  <div class="modal__backdrop"></div>

  <div class="modal__content">
    <button class="modal__close" aria-label="Close">×</button>

    <h2>Welcome Back</h2>
    <p>Sign in to your account to continue</p>

    <!-- Success Alert (hidden initially) -->
    <div class="alert alert--success" style="display: none;">
      <strong>Success!</strong> You're now logged in.
    </div>

    <!-- Error Alert (shown on failed login) -->
    <div class="alert alert--error" style="display: none;">
      <strong>Error:</strong> Invalid email or password.
    </div>

    <form class="form">
      <div class="form__group">
        <label class="form__label" for="login-email">
          Email Address
        </label>
        <input
          type="email"
          id="login-email"
          class="form__input"
          placeholder="you@example.com"
          required
        />
      </div>

      <div class="form__group">
        <label class="form__label" for="login-password">
          Password
        </label>
        <input
          type="password"
          id="login-password"
          class="form__input"
          placeholder="••••••••"
          required
        />
      </div>

      <div class="form__group">
        <label class="form__checkbox">
          <input type="checkbox" />
          <span>Remember me</span>
        </label>
      </div>

      <button type="submit" class="button button--primary button--full-width">
        <span class="button__text">Sign In</span>
        <!-- Loading spinner (hidden initially) -->
        <span class="spinner spinner--neon" style="display: none;"></span>
      </button>

      <div class="form__footer">
        <a href="/forgot-password" class="form__link">
          Forgot password?
        </a>
        <span>•</span>
        <a href="/register" class="form__link">
          Create account
        </a>
      </div>
    </form>

    <div class="divider">
      <span>or continue with</span>
    </div>

    <div class="social-login">
      <button class="button button--outline">
        <svg><!-- Google icon --></svg>
        Google
      </button>
      <button class="button button--outline">
        <svg><!-- GitHub icon --></svg>
        GitHub
      </button>
    </div>

  </div>
</div>

```text

## Custom Form Styles

```css
.button--full-width {
  width: 100%;
  justify-content: center;
}

.button__text {
  display: inline-block;
}

.form__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.875rem;
}

.form__link {
  color: #FF3AAE;
  text-decoration: none;
}

.form__link:hover {
  color: #F4FF3C;
}

.divider {
  position: relative;
  text-align: center;
  margin: 2rem 0;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background-color: #333333;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.divider span {
  background-color: #1A1A1A;
  padding: 0 1rem;
  color: #CFC7BB;
  font-size: 0.875rem;
}

.social-login {
  display: flex;
  gap: 1rem;
}

.social-login .button {
  flex: 1;
}

```text

---

## 📂 Content Management

### File Manager Interface

Combines: **Breadcrumbs + Dropdowns + Empty State + Chips + Status Indicators**

```html
<div class="file-manager">

  <!-- Toolbar -->
  <div class="toolbar">
    <nav class="breadcrumbs">
      <a href="/" class="breadcrumbs__link">My Files</a>
      <span class="breadcrumbs__separator">/</span>
      <a href="/projects" class="breadcrumbs__link">Projects</a>
      <span class="breadcrumbs__separator">/</span>
      <span class="breadcrumbs__current">Portfolio 2026</span>
    </nav>

    <div class="toolbar__actions">
      <button class="button button--secondary">
        <svg><!-- Upload icon --></svg>
        Upload
      </button>
      <button class="button button--primary">
        <svg><!-- Folder icon --></svg>
        New Folder
      </button>
    </div>
  </div>

  <!-- File Grid -->
  <div class="file-grid">

    <!-- Folder Item -->
    <div class="file-item file-item--folder">
      <svg class="file-item__icon"><!-- Folder icon --></svg>
      <h4 class="file-item__name">UV Makeup</h4>
      <p class="file-item__meta">24 files • 156 MB</p>

      <div class="dropdown">
        <button class="dropdown__trigger">⋮</button>
        <div class="dropdown__menu">
          <button class="dropdown__item">Open</button>
          <button class="dropdown__item">Rename</button>
          <button class="dropdown__item">Share</button>
          <div class="dropdown__divider"></div>
          <button class="dropdown_*item dropdown*_item--danger">Delete</button>
        </div>
      </div>
    </div>

    <!-- Image File Item -->
    <div class="file-item file-item--image">
      <img src="/thumbnail.jpg" alt="Thumbnail" class="file-item__preview" />
      <h4 class="file-item__name">origin-festival-2026.jpg</h4>
      <p class="file-item__meta">2.4 MB • JPG</p>

      <span class="status status--online" title="Synced"></span>
    </div>

    <!-- Processing File -->
    <div class="file-item file-item--processing">
      <svg class="file-item__icon"><!-- Video icon --></svg>
      <h4 class="file-item__name">festival-highlight.mp4</h4>
      <p class="file-item__meta">Processing...</p>

      <div class="progress">
        <div class="progress__bar" style="width: 65%;"></div>
      </div>
    </div>

    <!-- More files... -->
  </div>

  <!-- Empty State (shown when folder is empty) -->
  <div class="empty-state" style="display: none;">
    <svg class="empty-state__icon">
      <!-- Empty folder icon -->
    </svg>
    <h3 class="empty-state__title">This folder is empty</h3>
    <p class="empty-state__description">
      Upload files or create new folders to get started.
    </p>
    <button class="button button--primary">
      Upload Files
    </button>
  </div>

</div>

```text

---

## 🎪 Event Detail Page

### Festival Event Page

Combines: **Hero + Timeline + Pricing + FAQ + CTA**

```html
<article class="event-detail">

  <!-- Event Hero -->
  <header class="event-hero">
    <div class="event-hero__image">
      <img src="/origin-festival.jpg" alt="Origin Festival" />
    </div>

    <div class="event-hero__content">
      <div class="badge badge--primary">Music Festival</div>
      <h1>Origin Festival 2026</h1>
      <p class="event-hero__tagline">
        South Africa's premier psytrance gathering
      </p>

      <div class="event-hero__meta">
        <div class="event-meta__item">
          <svg><!-- Calendar icon --></svg>
          <span>December 28 - January 1</span>
        </div>
        <div class="event-meta__item">
          <svg><!-- Location icon --></svg>
          <span>Cederberg, South Africa</span>
        </div>
        <div class="event-meta__item">
          <svg><!-- Users icon --></svg>
          <span>5,000+ attendees</span>
        </div>
      </div>

      <div class="button-group">
        <button class="button button--primary">
          Get Tickets
        </button>
        <button class="button button--secondary">
          Save Event
        </button>
      </div>
    </div>
  </header>

  <!-- Event Description -->
  <section class="event-section">
    <h2>About the festival</h2>
    <p>
      Origin Festival brings together the global psytrance community
      for five days of music, art, and transformation in the stunning
      Cederberg mountains...
    </p>
  </section>

  <!-- Timeline -->
  <section class="event-section">
    <h2>Schedule</h2>

    <div class="timeline">
      <div class="timeline__item">
        <div class="timeline__marker"></div>
        <div class="timeline__content">
          <h4 class="timeline__title">Day 1: Opening Ceremony</h4>
          <p class="timeline__date">December 28, 2026</p>
          <p>Gates open at 12:00 PM. Opening ritual at sunset.</p>
        </div>
      </div>

      <div class="timeline__item">
        <div class="timeline__marker"></div>
        <div class="timeline__content">
          <h4 class="timeline__title">Day 2-3: Main Stages</h4>
          <p class="timeline__date">December 29-30, 2026</p>
          <p>Three stages running 24/7 with international DJs.</p>
        </div>
      </div>

      <div class="timeline__item">
        <div class="timeline__marker"></div>
        <div class="timeline__content">
          <h4 class="timeline__title">Day 4: New Year's Eve</h4>
          <p class="timeline__date">December 31, 2026</p>
          <p>Midnight celebration with synchronized visuals.</p>
        </div>
      </div>

      <div class="timeline__item">
        <div class="timeline__marker"></div>
        <div class="timeline__content">
          <h4 class="timeline__title">Day 5: Closing Ceremony</h4>
          <p class="timeline__date">January 1, 2027</p>
          <p>Sunrise ceremony and final sets until noon.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Pricing -->
  <section class="event-section">
    <h2>Tickets</h2>

    <div class="pricing-grid">
      <div class="pricing-card">
        <div class="pricing-card__header">
          <h3>Early Bird</h3>
          <p class="pricing-card__price">R2,500</p>
        </div>
        <ul class="pricing-card__features">
          <li class="pricing-card__feature">5-day festival pass</li>
          <li class="pricing-card__feature">Camping included</li>
          <li class="pricing-card_*feature pricing-card*_feature--disabled">
            VIP area access
          </li>
          <li class="pricing-card_*feature pricing-card*_feature--disabled">
            Backstage pass
          </li>
        </ul>
        <button class="button button--secondary button--full-width">
          Sold Out
        </button>
      </div>

      <div class="pricing-card pricing-card--featured">
        <div class="pricing-card__header">
          <h3>General Admission</h3>
          <p class="pricing-card__price">R3,200</p>
        </div>
        <ul class="pricing-card__features">
          <li class="pricing-card__feature">5-day festival pass</li>
          <li class="pricing-card__feature">Camping included</li>
          <li class="pricing-card_*feature pricing-card*_feature--disabled">
            VIP area access
          </li>
          <li class="pricing-card_*feature pricing-card*_feature--disabled">
            Backstage pass
          </li>
        </ul>
        <button class="button button--primary button--full-width">
          Buy Now
        </button>
      </div>

      <div class="pricing-card">
        <div class="pricing-card__header">
          <h3>VIP Pass</h3>
          <p class="pricing-card__price">R5,500</p>
        </div>
        <ul class="pricing-card__features">
          <li class="pricing-card__feature">5-day festival pass</li>
          <li class="pricing-card__feature">Camping included</li>
          <li class="pricing-card__feature">VIP area access</li>
          <li class="pricing-card__feature">Backstage pass</li>
        </ul>
        <button class="button button--primary button--full-width">
          Buy Now
        </button>
      </div>
    </div>
  </section>

  <!-- FAQ Accordion -->
  <section class="event-section">
    <h2>Frequently Asked Questions</h2>

    <div class="accordion">
      <div class="accordion__item">
        <button class="accordion_*header accordion*_header--active">
          <span>What's included in the ticket price?</span>
          <svg class="accordion__icon"><!-- Chevron --></svg>
        </button>
        <div class="accordion__content">
          <p>
            Your ticket includes 5 days of music across 3 stages,
            camping space, access to all workshops and healing areas,
            and 24/7 security.
          </p>
        </div>
      </div>

      <div class="accordion__item">
        <button class="accordion__header">
          <span>Can I bring my own food and drinks?</span>
          <svg class="accordion__icon"><!-- Chevron --></svg>
        </button>
        <div class="accordion__content">
          <p>
            Yes! You're welcome to bring your own food and non-alcoholic
            beverages. There are also food vendors on site.
          </p>
        </div>
      </div>

      <div class="accordion__item">
        <button class="accordion__header">
          <span>Is there cell phone reception at the venue?</span>
          <svg class="accordion__icon"><!-- Chevron --></svg>
        </button>
        <div class="accordion__content">
          <p>
            Reception is limited. We recommend downloading offline maps
            and coordinating meeting points with your crew.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="cta">
    <h2 class="cta__title">Ready to experience Origin?</h2>
    <p class="cta__description">
      Join 5,000+ festival-goers for South Africa's most transformative
      psytrance gathering.
    </p>

    <button class="button button--primary button--large">
      Get Your Ticket Now
    </button>
  </section>

</article>

```text

---

## 🎨 Pro Tips: Component Composition

### Best Practices

1. **Layer Semantically**

   ```html
   <article> <!-- Semantic container -->
     <header> <!-- Logical grouping -->
       <nav> <!-- Navigation context -->
         <div class="breadcrumbs"> <!-- BEM component -->

```text

1. **Progressive Enhancement**

   - Start with HTML structure
   - Add BEM classes
   - Style with dark theme CSS
   - Enhance with JavaScript

1. **Accessibility First**

   - Always include ARIA labels
   - Maintain focus indicators
   - Test keyboard navigation
   - Verify screen reader compatibility

1. **Responsive Patterns**

   - Mobile-first approach
   - Use CSS Grid for complex layouts
   - Flexbox for simple alignments
   - Test across breakpoints

1. **Performance**

   - Lazy load images in galleries
   - Defer non-critical JavaScript
   - Minimize DOM depth
   - Use CSS transforms for animations

---

## 🚀 Next Steps

1. **Copy these patterns** into your project

1. **Customize colors** using the neon palette

1. **Test thoroughly** across devices

1. **Add interactivity** with JavaScript

1. **Monitor accessibility** with browser tools

---

**Full Component Reference:** `/docs/dark-mode-component-showcase.md`
**Theme Documentation:**
`/reports/theme-styling-audit/dark-mode-final-completion-report.md`
**Usage Guide:** `/docs/dark-mode-usage-guide.md`

---

**Last Updated:** March 11, 2026
**Version:** 2.0.0
**Components:** 54 fully styled