vuetify-theming

What problem does it solve?

Vuetify theming prevents inconsistent colors and styling when you need reliable light/dark mode, reusable design tokens, and uniform component appearance across the Vue SSR Starter Kit.

Core Features & Use Cases

• Light/Dark Theme Configuration: Defines defaultTheme plus light and dark theme palettes (including surface/background and on-* contrast colors) for predictable UI appearance.
• Theme Tokens as CSS Variables: Uses Vuetify theme colors (e.g., primary/secondary/accent/success/warning/error/info/surface/background) so components can reference a single source of truth for styling.
• Dark-Mode Switching: Toggles the active theme via Vuetify’s useTheme() so SSR and hydration stay consistent with the current theme.
• Per-Component Defaults: Applies global defaults via createVuetify({ defaults: {...} }) to enforce consistent variants, rounding, density, and other visual props across the app.
• Vuetify Utility Classes: Provides spacing, typography, and color utility classes (e.g., ma-4, text-primary, bg-background) for quick, consistent layout and styling.

Quick Start

Update the theme in src/plugins/vuetify.js and call the theme toggle using useTheme() to switch between light and dark modes across the SSR app.