Themes & Customization
Customize the RetroVoid UI with themes and visual effects.
RetroVoid ships with five distinct visual themes, each with its own personality. You can also build your own theme from scratch with the Custom Theme Editor, or fine-tune visual effects and rendering quality to match your preferences and hardware.
Built-in Themes
| Theme | Accent Color | Description |
|---|---|---|
| Cyberpunk | Neon Cyan (#00f5ff) | The default. Holographic effects, neon grid, particle system, bloom, chromatic aberration. |
| Minimal | Warm Tan (#c4a574) | Clean and understated. No grid, no particles, no bloom, no holographic shader. Soft vignette only. |
| Retro CRT | Amber Orange (#ff6b35) | CRT monitor emulation with barrel distortion, phosphor glow, scanlines, and CRT frame border. |
| Purple Passion | Rich Purple (#9b59b6) | Retro CRT aesthetic with a cohesive purple palette. Phosphor glow, scanlines, barrel distortion, and holographic card shaders. |
| Terminal | Terminal Green (#00ff41) | Matrix/Fallout style. Same CRT effects as Retro CRT but with green phosphor tones. |
Switching Themes
- Open Settings > Appearance (press F1 twice to open Settings).
- Select one of the five theme cards.
- The theme applies instantly. No restart needed.
The selected theme is persisted automatically.
Theme Comparison
Here's a detailed comparison of how each theme configures visual effects:
| Effect | Cyberpunk | Minimal | Retro CRT | Purple Passion | Terminal |
|---|---|---|---|---|---|
| Grid | Yes | No | Yes | Yes | Yes |
| Particles | Yes | No | Yes | Yes | Yes |
| Bloom | Yes (0.15) | No | Yes (0.2) | Yes (0.2) | Yes (0.2) |
| Chromatic Aberration | Yes | No | Yes | Yes | Yes |
| Vignette | Yes (0.7) | Subtle (0.3) | No | No | No |
| Barrel Distortion | No | No | Yes (0.35) | Yes (0.35) | Yes (0.35) |
| Phosphor Glow | No | No | Yes | Yes | Yes |
| CRT Frame | No | No | Yes | Yes | Yes |
| Holographic Shader | Yes | No | Yes | Yes | Yes |
CRT Effects (Retro CRT, Purple Passion & Terminal)
The Retro CRT, Purple Passion, and Terminal themes feature custom GLSL post-processing shaders:
- Barrel Distortion: simulates CRT screen curvature with hard black edges
- Phosphor Glow: CRT light bleed via Gaussian blur with luminance-based blending
- CRT Frame: hard-edge black border using a superellipse formula
The full effect pipeline runs in this order: Bloom → Chromatic Aberration → Barrel Distortion → Phosphor Glow → Vignette → Noise → CRT Frame.
Visual Effect Toggles
You can independently toggle these effects in Settings > Appearance, regardless of which theme you're using:
- Post-Processing: bloom, chromatic aberration, and noise (available for all themes)
- Particles: background particle system (toggle hidden when using Minimal theme)
- 3D Grid: cyberpunk grid overlay (toggle hidden when using Minimal theme)
- 3D Background: full 3D background scene (toggle hidden when using Minimal theme)
Performance tip: Disabling post-processing and particles can significantly improve performance on integrated GPUs.
3D Quality Settings
RetroVoid's 3D rendering quality can be adjusted across five tiers. This controls the render resolution (Device Pixel Ratio):
| Tier | Render Scale | Notes |
|---|---|---|
| Performance | 1x fixed | Best for older or integrated GPUs |
| Balanced | Up to 1.5x | Good balance of quality and performance |
| High (default) | Up to 2x | Recommended for most dedicated GPUs |
| Ultra | Up to 3x | For high-end GPUs (GPU intensive) |
| Maximum | Native DPR | Best quality, highest GPU load |
Grid Card Size
In Grid View, you can adjust the game card size using a slider in the toolbar. The range is 120px to 280px, with a default of 180px. Cover art is displayed at a 3:4 aspect ratio.
Theme CSS Variables
Each theme injects CSS custom properties onto the document root, which style the entire UI:
--theme-bg, --theme-bg-secondary
--theme-surface, --theme-surface-hover
--theme-border, --theme-border-hover
--theme-text, --theme-text-secondary, --theme-text-muted
--theme-accent, --theme-accent-hover, --theme-accent-muted
--theme-accent-secondary
--theme-scrollbar-track, --theme-scrollbar-thumbThese variables ensure consistent styling across all UI components and automatically adapt when you switch themes.
Custom Theme Editor
Want full control? The Custom Theme Editor lets you build your own theme from scratch with live preview. Open it from Settings > Custom Theme.
Customizable Colors
- Base Colors: background, background secondary, surface, surface hover, border, border hover
- Text Colors: primary, secondary, muted
- Accent Colors: primary accent, accent hover, accent muted, accent secondary
- Scrollbar: track, thumb, thumb hover
3D Environment
- Lighting: scene background, primary/secondary/accent light colors
- Grid: toggle on/off, grid color, grid secondary color
- Particles: toggle on/off, particle color
- Shelf: shelf color, emissive intensity
Visual Effects
- Bloom: toggle + intensity and threshold sliders
- Chromatic Aberration: toggle + offset slider
- Vignette: toggle + darkness slider
- Noise: toggle + opacity slider
- CRT Screen Effect: toggle (enables barrel distortion + CRT frame)
- Phosphor Glow: toggle + glow color, intensity, and spread
- Holographic Shader: toggle + card glow color, scanline intensity, shimmer intensity, and edge glow
All changes apply in real-time. Use the Reset to Defaults button at the top to start over.