Theming and colors

Every rendered SVG is styled with --rr-* CSS custom properties and ships with light-mode fallbacks baked in, so it looks right out of the box. To recolor it or add a dark theme, set the variables on any element that wraps the SVG — you only override what you want to change, and nothing has to be re-rendered.

Syntax palette

One color per syntax category, shared by the source band, the syntax reference and the diagram's accents so a token reads the same color everywhere. These are the --rr-syntax-* variables and their light-mode defaults.

• literal#3b82f6a b 1Plain literal characters
• charset#16a34a\d \w .Shorthand character sets and the dot
• class#d97706[a-z] [^0-9]Bracketed character classes
• anchor#8b5cf6^ $ \bAnchors and word boundaries
• quantifier#c026d3* + ? {n,m}Quantifiers and counted repeats
• group#e11d48( ) (?: (?<n>Capturing and non-capturing groups
• lookaround#ea580c(?= (?! (?<=Lookahead and lookbehind
• backref#0d9488\1 \k<n>Backreferences
• alternation#64748ba|b|cAlternation between branches

/* The SVG ships with these light-mode defaults baked in; override only
   the variables you want to change, on any element wrapping the SVG. */
.regex-diagram {
  --rr-syntax-literal: #3b82f6;     /* a b 1            */
  --rr-syntax-charset: #16a34a;     /* \d \w .          */
  --rr-syntax-class: #d97706;       /* [a-z] [^0-9]     */
  --rr-syntax-anchor: #8b5cf6;      /* ^ $ \b           */
  --rr-syntax-quantifier: #c026d3;  /* * + ? {n,m}      */
  --rr-syntax-group: #e11d48;       /* ( ) (?<name>     */
  --rr-syntax-lookaround: #ea580c;  /* (?= (?! (?<=     */
  --rr-syntax-backref: #0d9488;     /* \1 \k<name>      */
  --rr-syntax-alternation: #64748b; /* a|b|c            */
}

Structure and dark mode

Beyond the palette, these variables drive the rail, text and labels — most of what a dark theme needs — plus the source-band hover highlight.

.dark .regex-diagram {
  --rr-rail: #64748b;   /* connecting rail            */
  --rr-text: #e2e8f0;   /* source band + box text     */
  --rr-muted: #94a3b8;  /* group / class labels       */
  --rr-group: #64748b;  /* neutral group outline      */
}

/* Source-band hover highlight: tint strength and glow spread. */
.regex-diagram {
  --rr-syntax-hl-opacity: 0.18;
  --rr-syntax-glow: 8px;
}