Skip to main content

Themes

The loading screen comes with 3 built-in themes. Set the active theme in config.js:

theme: 'vice-city', // 'vice-city' | 'cyberpunk' | 'minimal-glass'

Vice City Neon​

A dark neon aesthetic inspired by Vice City — deep purple/black background with hot pink and cyan glows.

  • Background — #0D0010
  • Primary — #FF2D78 (hot pink)
  • Secondary — #00F5FF (cyan)
  • Accent — #BF5FFF (purple)
  • Progress bar — Pink → Purple → Cyan gradient
theme: 'vice-city'

Cyberpunk Dark​

A dark cyberpunk aesthetic with neon green and blue accents on a near-black background.

  • Background — #050505
  • Primary — #00FF9F (neon green)
  • Secondary — #0066FF (blue)
  • Accent — #FF6B00 (orange)
  • Progress bar — Green → Blue gradient
theme: 'cyberpunk'

Minimal Glass​

A clean, minimal glass aesthetic with white accents and frosted glass effects on a dark background.

  • Background — #0B0C11
  • Primary — #FFFFFF
  • Secondary — rgba(255,255,255,0.65)
  • Progress bar — Purple → White gradient
theme: 'minimal-glass'

Custom Themes​

You can fully customize any theme or create your own by editing web/css/themes.css. Each theme is a set of CSS variables:

html[data-theme="my-theme"] {
  --color-bg:        #000000;
  --color-primary:   #ff0000;
  --color-secondary: #ffffff;
  --color-accent:    #ff8800;
  --color-text:      #ffffff;
  --color-text-dim:  rgba(255,255,255,0.6);
  --progress-bar:    linear-gradient(90deg, #ff0000, #ff8800);
  /* ...and more */
}

Then set your theme name in config.js:

theme: 'my-theme'
tip

The full list of available CSS variables is at the top of web/css/themes.css.