Themes

Custom Themes

When developing a new theme, run make build to compile assets.

Structure

themes/
└── your-theme/
    ├── theme.yaml        # required — theme config
    ├── theme.scss        # optional — extra styles
    └── variables.scss    # optional — CSS variable overrides

The easiest way to start is to copy an existing theme (fast, crystal, sin-city, borderlands, matrix) and modify it.

theme.yaml

Defines the theme's visual identity and behavior.

name: "my-theme"
author: "Your Name"
description: "Short description"
emoji: "🎨"

settings:
  flow:
    hide_mc_slider: false
    default_concurrent: 75
    min_concurrent: 1
    max_concurrent: 150
    task_buttons:
      - { label: "🐢 Slow 25 [PHP]", tasks: 25, stress: false, semaphore_driver: "shared", tooltip: "~1-2s" }
      - { label: "🎲 RAND", mode: "rand", class: "danger", full_width: true, tooltip: "CHAOS!" }

  ui:
    color_generator: "neon"
    progress_bar:
      height: 3
    lod:
      normal_max: 750
      medium_max: 1500
      scale_normal: 1.0
      scale_medium: 0.6
    task_colors:
      255: "#ff0000"
    remove_delays:
      lock_failed: 1000
    label_text_color: "#000000"

flow

Field	Description
hide_mc_slider	Hide the concurrency slider (useful for special-mode themes)
default_concurrent	Initial slider value
min_concurrent / max_concurrent	Slider bounds
task_buttons	Array of buttons (see below)

ui

Field	Description
color_generator	Name of the generator (see resources/js/modules/color-generators.js)
progress_bar.height	Height in px (0 = hidden)
lod.*	Level-of-detail thresholds and scales
task_colors	Explicit hex colors by mc value (overrides generator)
remove_delays.lock_failed	How long LOCK_FAILED tasks stay visible (ms)
label_text_color	Text color inside task squares

Task buttons

Two modes:

Normal — fires a batch with a fixed task count:

- { label: "👾 100 (API)", tasks: 100, stress: false, semaphore_driver: "api", tooltip: "~1-2s" }

Special — uses mode instead of tasks:

- { label: "🎲 RAND", mode: "rand", class: "danger", full_width: true, tooltip: "CHAOS!" }
- { label: "🐎💨", mode: "nitro", class: "danger", full_width: true, tooltip: "0xFF | API" }

Field	Description
label	Button text (emoji allowed)
tasks	Task count (normal mode only)
mode	rand or nitro (special modes)
stress	true = fast tasks, false = observation mode
semaphore_driver	shared (PHP Atomic) or api (Go Distributed)
class	default, warning, accent, danger
full_width	Span both columns
tooltip	Shown on hover

Color generators

Generators live in resources/js/modules/color-generators.js.

A generator is a function (seed) => cssColor, where seed is a number.

By default, seed is the task's mc (max concurrency). To use the task's unique id instead, prefix the generator name with *:

color_generator: "neon"      # seed = mc — same color for tasks with the same mc
color_generator: "*matrix"   # seed = hash(task.id) — color from palette, distributed by task id

The * prefix is useful for themes where all tasks share the same mc (e.g. Nitro mode with mc = 255), but you still want visual variety.

To see all available generators — check resources/js/modules/color-generators.js.

CSS variables

Override theme colors in variables.scss. See existing themes for the full list of variables.

Switching themes

Append ?theme=your-theme to the URL, or use the footer links.