Themes
VistaView includes 17 pre-built themes that you can use out of the box. Each theme is a separate CSS file that can be imported alongside the base styles.
Using Themes
Section titled “Using Themes”import 'vistaview/style.css'; // Base styles (required)import 'vistaview/styles/dark-rounded.css'; // Theme (optional)Available Themes
Section titled “Available Themes”Dark Themes
Section titled “Dark Themes”dark-rounded
Section titled “dark-rounded”Modern dark theme with rounded corners and animated navigation buttons.
import 'vistaview/styles/dark-rounded.css';midnight-ocean
Section titled “midnight-ocean”Deep navy blues with cyan accents.
import 'vistaview/styles/midnight-ocean.css';midnight-gold
Section titled “midnight-gold”Elegant black background with gold accents.
import 'vistaview/styles/midnight-gold.css';ember-glow
Section titled “ember-glow”Dark theme with orange glow effects.
import 'vistaview/styles/ember-glow.css';neon-nights
Section titled “neon-nights”Cyberpunk-inspired magenta and cyan with glowing effects.
import 'vistaview/styles/neon-nights.css';Light Themes
Section titled “Light Themes”paper-light
Section titled “paper-light”Light theme with subtle shadows and paper-like appearance.
import 'vistaview/styles/paper-light.css';ice-crystal
Section titled “ice-crystal”Cool light blue palette with crisp styling.
import 'vistaview/styles/ice-crystal.css';Color Themes
Section titled “Color Themes”autumn-amber
Section titled “autumn-amber”Warm oranges and browns with earthy tones.
import 'vistaview/styles/autumn-amber.css';cotton-candy
Section titled “cotton-candy”Playful pastel pink with soft styling.
import 'vistaview/styles/cotton-candy.css';forest-moss
Section titled “forest-moss”Earthy greens inspired by nature.
import 'vistaview/styles/forest-moss.css';green-lake
Section titled “green-lake”Calming teal and green palette with smooth transitions.
import 'vistaview/styles/green-lake.css';lavender-fields
Section titled “lavender-fields”Soft purple palette with gentle animations.
import 'vistaview/styles/lavender-fields.css';mint-chocolate
Section titled “mint-chocolate”Brown and mint green combination.
import 'vistaview/styles/mint-chocolate.css';soft-neutral
Section titled “soft-neutral”Warm beige and cream tones with maximum roundness.
import 'vistaview/styles/soft-neutral.css';strawberry
Section titled “strawberry”Vibrant pink and red gradient theme.
import 'vistaview/styles/strawberry.css';Special Themes
Section titled “Special Themes”stark-minimal
Section titled “stark-minimal”Pure black and white, zero border radius, minimalist design.
import 'vistaview/styles/stark-minimal.css';retro-arcade
Section titled “retro-arcade”Bold primary colors with classic arcade aesthetics.
import 'vistaview/styles/retro-arcade.css';Theme Sizes
Section titled “Theme Sizes”All themes are lightweight:
- Smallest: dark-rounded (0.69 KB, 0.26 KB gzip)
- Largest: retro-arcade (1.14 KB, 0.38 KB gzip)
- Average: ~0.83 KB (~0.30 KB gzip)
Creating Custom Themes
Section titled “Creating Custom Themes”See the Custom Styling guide to create your own theme based on these examples.
Next Steps
Section titled “Next Steps”- Learn about CSS variables
- Create custom styling
- Explore configuration options