Files
turbovault-app/docs/THEMES.md
2026-03-28 19:24:29 -04:00

1.4 KiB

TurboVault Themes

Available Themes

TurboVault now supports 5 beautiful themes to customize your experience!

☀️ Light (Default)

  • Clean, bright interface
  • Easy on the eyes during daytime
  • Classic Tailwind styling

🌙 Dark

  • Modern dark mode
  • Reduced eye strain in low light
  • Sleek and professional

🌃 Midnight

  • Deep blue tones
  • Perfect for late-night gaming sessions
  • Calm and immersive

🕹️ Retro

  • Classic gaming aesthetic
  • Brown and gold color scheme
  • Nostalgic vibes

🌊 Ocean

  • Blue and teal theme
  • Fresh and vibrant
  • Aquatic inspiration

How to Change Your Theme

  1. Go to Settings page
  2. Scroll to Theme section
  3. Click on your preferred theme card
  4. Click "Update Profile"
  5. Enjoy your new look! 🎉

Technical Details

  • Themes are stored per-user in the database
  • Applied via CSS classes on the <body> tag
  • Works seamlessly with Turbo (no page reload needed)
  • Default theme: light

Adding New Themes

To add a new theme:

  1. Add validation in app/models/user.rb
  2. Add theme styles in app/assets/stylesheets/themes.css
  3. Add theme option in app/views/users/settings.html.erb

Theme Persistence

Your theme preference is saved to your account and will persist across:

  • Different browsers
  • Different devices
  • App restarts

Browser Support

Themes work in all modern browsers that support CSS custom properties and Tailwind CSS.