Wreck IT 7.0 Theme

A full CTFd customization bundle: a hacker-themed dark UI (neon orange/black, inspired by wreckit.id) plus two companion plugins for avatars and a live scoreboard.

What's Inside

Path	What it is
ctfd-theme-wreckit7/	The CTFd theme itself (templates, SCSS, JS, build config)
plugins/avatars/	File-based avatar upload plugin for users and teams (Gravatar/DiceBear fallback)
plugins/livescoreboard/	Real-time /livescoreboard page (SSE-powered, Persona 5-inspired UI) with a site-wide first-blood toast

Each folder has its own README with full setup, API, and troubleshooting details. This top-level README only covers how the pieces fit together.

Quick Start

# 1. Copy the theme
cp -r ctfd-theme-wreckit7 /path/to/CTFd/CTFd/themes/wreckit

# 2. Copy the plugins
cp -r plugins/avatars /path/to/CTFd/CTFd/plugins/avatars
cp -r plugins/livescoreboard /path/to/CTFd/CTFd/plugins/live-attack-map

# 3. Restart CTFd, then select "wreckit" under Admin Panel > Config > Theme

The theme ships with pre-built assets in ctfd-theme-wreckit7/static/, so npm install / npm run build is only needed if you modify source files under assets/.

Requirements

• CTFd 3.x+
• A writable UPLOAD_FOLDER (for the avatars plugin) — see plugins/avatars/README.md for Docker notes

Development

The theme uses Vite for its build pipeline:

cd ctfd-theme-wreckit7
npm install
npm run dev     # watch mode
npm run build    # production build

The plugins are plain Flask blueprints and need no build step.

Preview

Credits

• Based on the CTFd Core Theme
• Inspired by Wreck-IT CTF competition
• Powered by CTFd