openclaw-theme-neon

Neon cyberpunk theme for OpenClaw. Matrix rain canvas, glowing terminals, dark-glass panels — make your personal AI assistant look like it's running in 2077.

Repo: github.com/ianalloway/openclaw-theme-neon

Live preview: ianalloway.github.io/openclaw-theme-neon — variant switcher, matrix rain toggle, CSS variable editor.

• 🌧️ Matrix rain background via matrix-rain.js (canvas; density/speed from CSS variables)
• 💚 Neon green primary accent with hot-pink secondary (plus color variants)
• 🪟 Dark-glass panel effect with frosted backdrop blur
• ⌨️ Monospace everything — IBM Plex Mono throughout
• 🔴 Glowing borders with pulse animation on active elements
• 📱 Responsive — works on mobile terminal views
• ♿ Reduced-motion mode respects prefers-reduced-motion (rain disabled)

git clone https://github.com/ianalloway/openclaw-theme-neon.git
mkdir -p ~/.openclaw/themes/neon
cp theme.css variables.css matrix-rain.js ~/.openclaw/themes/neon/
# optional variants:
cp -r variants ~/.openclaw/themes/neon/

In openclaw.config.yaml:

theme: neon

openclaw skill install openclaw-theme-neon

Live (GitHub Pages): https://ianalloway.github.io/openclaw-theme-neon/

Includes a variant switcher, matrix-rain toggle, and a CSS variable editor sidebar. The site is published from the main branch root so theme.css, matrix-rain.js, and variants/ resolve next to docs/preview.html.

No build step. From the repo root:

python -m http.server 8765
# open http://localhost:8765/docs/preview.html

Screenshot assets are intentionally not checked in — capture your own from this preview if you need README images (issue #3).

╔══════════════════════════════════════════╗
║  ▓▒░ OPENCLAW NEON THEME ░▒▓            ║
║                                          ║
║  > How can I help you today?             ║
║  ▌                                       ║
╚══════════════════════════════════════════╝

Edit variables.css (names match what theme.css actually consumes):

:root {
  --neon-primary: #00ff41;    /* Matrix green */
  --neon-secondary: #ff0090;  /* Hot pink */
  --neon-accent: #00d4ff;     /* Cyan */
  --neon-bg: #090909;         /* Near-black */
  --neon-surface: rgba(0, 255, 65, 0.04);
  --neon-border: rgba(0, 255, 65, 0.2);
  --neon-glow: 0 0 12px rgba(0, 255, 65, 0.45), 0 0 30px rgba(0, 255, 65, 0.15);
  --neon-font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
  --matrix-density: 0.03;     /* Rain density (0.01–0.1) */
  --matrix-speed: 1.0;        /* Rain speed multiplier */
  --matrix-opacity: 0.18;     /* Canvas opacity */
}

In HTML:

<link rel="stylesheet" href="theme.css" />
<canvas class="neon-matrix-rain" id="matrix-rain"></canvas>
<script src="matrix-rain.js"></script>

matrix-rain.js auto-inits on DOM ready. Call MatrixRain.destroy() to tear down, or MatrixRain.setVariant('neon-blue') to retint the rain primary.

Load a variant after theme.css so it overrides :root tokens:

<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="variants/neon-dracula.css" />

theme: neon-blue   # or neon-amber, neon-red, neon-dracula

• #1 Dracula variant → shipped as variants/neon-dracula.css
• #2 Theme preview page → GitHub Pages preview
• #3 README screenshots → use the preview to capture real shots; no placeholder image files

Ian Alloway — building AI tools with style.

MIT — see LICENSE.