Theming¶
CTFHive ships a single fixed visual theme and font stack. The appearance panel
(/admin/appearance) exposes the controls that genuinely work. This page
documents precisely what is and is not configurable today.
What is fixed¶
Single theme, single layout, single font stack
The theme engine, layout engine, and font engine are currently stubs. Each
returns exactly one option. The admin panel renders selection controls for
them (preserved for future multi-theme support), but changing the value via
those controls has no visible effect — the stub set_active_* methods do
nothing.
The three items below are not user-configurable at runtime:
Theme: A single "Phosphor" amber-CRT dark-mode theme is active
(get_active_theme() returns "phosphor"). It is injected into every page
via a Jinja context processor in ctfapp/__init__.py.
Layout: A single "terminal-core" layout is active.
Font stack: The platform uses Orbitron (brand), Rajdhani (display), and Share Tech Mono (body/mono), loaded directly in the base template.
If you need a different look, you must edit the base templates and static CSS directly in the Flask application.
What is configurable¶
The following settings are stored in the app_settings table, changed via
/admin/settings, and take effect on the next page load without a restart.
UI density (ui_density)¶
Controls whitespace and card spacing globally.
| Value | Effect |
|---|---|
compact |
Tighter cards, denser tables, less whitespace |
cozy |
Balanced spacing for everyday operations (default: spacious seeded) |
spacious |
Airier spacing for presenter or observer mode |
The value is injected into every template as {{ ui_density }} and CSS
classes are applied at the body/container level.
UI motion (ui_motion)¶
Controls animated transitions and the background canvas.
| Value | Effect |
|---|---|
full |
Keeps animated transitions and ambient background motion (default) |
reduced |
Cuts transitions; favors stability for users sensitive to motion |
Background animation (default_bg_animation)¶
Sets the ambient background canvas shown to visitors. This is the most
visually impactful setting available today. It is stored as
default_bg_animation and injected as {{ default_bg_animation }} in every
page template.
See the full list of available animations in the Admin panel — Site settings reference table, including which options require WebGL.
The background animation preference is per-visitor once they interact with
the preference toggle. The default_bg_animation setting controls what new
visitors and users who have not changed their preference see.
CTF name and identity¶
The CTF name, description, logo path, and favicon path are configured through environment variables, not the admin settings UI:
| Variable | Default | Description |
|---|---|---|
CTF_NAME |
CTF Platform |
Shown in the browser title and nav bar |
CTF_DESCRIPTION |
(empty) | Meta description tag |
CTF_LOGO |
img/logo.png |
Path to logo within the static directory |
CTF_FAVICON |
favicon.svg |
Path to favicon within the static directory |
To change the logo, replace the files at the configured paths in
ctfapp/static/ and restart the application.
Planned (not yet implemented)¶
Roadmap
The following capabilities are designed but not yet built:
- Multiple theme palettes — the
ThemeEngine,UILayoutEngine, andUIFontEngineclasses are architected for this. When multi-theme support ships, the stub methods (list_themes,set_active_theme, etc.) will return real options and the admin appearance panel will become fully functional. - Manifest-driven theme packs — themes loaded from YAML/JSON manifests that declare CSS variables, font choices, and background defaults as a unit.
- Custom CSS injection — an admin text field for per-event branding overrides without touching templates.
- Light mode toggle — CSS variable swap at the user preference level.
Summary: configurable today¶
| Knob | Where | Stored in |
|---|---|---|
| Background animation | /admin/settings |
app_settings.default_bg_animation |
| UI density | /admin/appearance |
app_settings.ui_density |
| UI motion | /admin/appearance |
app_settings.ui_motion |
| CTF name | Environment variable | CTF_NAME |
| CTF description | Environment variable | CTF_DESCRIPTION |
| Logo | Environment variable + static file | CTF_LOGO |
| Favicon | Environment variable + static file | CTF_FAVICON |