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

ThemeAccent ColorDescription
CyberpunkNeon Cyan (#00f5ff)The default. Holographic effects, neon grid, particle system, bloom, chromatic aberration.
MinimalWarm Tan (#c4a574)Clean and understated. No grid, no particles, no bloom, no holographic shader. Soft vignette only.
Retro CRTAmber Orange (#ff6b35)CRT monitor emulation with barrel distortion, phosphor glow, scanlines, and CRT frame border.
Purple PassionRich Purple (#9b59b6)Retro CRT aesthetic with a cohesive purple palette. Phosphor glow, scanlines, barrel distortion, and holographic card shaders.
TerminalTerminal Green (#00ff41)Matrix/Fallout style. Same CRT effects as Retro CRT but with green phosphor tones.

Switching Themes

  1. Open Settings > Appearance (press F1 twice to open Settings).
  2. Select one of the theme cards. There are six: the five built-in themes plus Custom.
  3. The theme applies instantly. No restart needed.

The same six cards are also in the Quick Settings panel, under Theme. The selected theme is persisted automatically.

Theme Comparison

Here's a detailed comparison of how each theme configures visual effects:

EffectCyberpunkMinimalRetro CRTPurple PassionTerminal
GridYesNoYesYesYes
ParticlesYesNoYesYesYes
BloomYes (0.15)NoYes (0.2)Yes (0.2)Yes (0.2)
Chromatic AberrationYesNoYesYesYes
VignetteYes (0.7)Subtle (0.3)NoNoNo
Barrel DistortionNoNoYes (0.35)Yes (0.35)Yes (0.35)
Phosphor GlowNoNoYesYesYes
CRT FrameNoNoYesYesYes
Holographic ShaderYesNoYesYesYes

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. The first four are also in the Quick Settings panel:

  • Post-Processing: chromatic aberration, noise, vignette, and CRT effects (available for all themes)
  • Particles: floating particle effects in the background (toggle hidden when using Minimal theme)
  • 3D Grid: neon grid in the background (toggle hidden when using Minimal theme)
  • 3D Background: 3D scene in Grid and List views (toggle hidden when using Minimal theme)
  • Pause 3D When in Background: stops 3D rendering while RetroVoid isn't the active window, and freezes animated cover art along with it. Minimizing the window always pauses, whatever this is set to. On by default.

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. The section appears only while 3D Background is enabled:

TierRender ScaleNotes
Performance1xBest for older or integrated GPUs
Balanced1.5xGood balance of quality and performance
High (default)2xRecommended for most dedicated GPUs
UltraUp to 3xFor high-end GPUs, may impact performance
MaximumNative display resolutionBest visual quality, high GPU load

Grid Card Size

In Grid View, you can adjust the game card size using the slider at the top right of the top bar. The slider appears only in Grid View. 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-thumb, --theme-scrollbar-thumb-hover

These variables ensure consistent styling across all UI components and automatically adapt when you switch themes. The CRT themes add a few more for phosphor glow on text, borders, and boxes.

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, or select the Custom theme card in the Appearance tab and click Edit Custom Theme.

The app switches to your custom theme while you have the tab open so you can see every change live, and restores whichever theme you were using when you leave the tab.

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.

Previous

Keybindings

Next

Music