skills.rest
e-xode
e-xodeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vuetify-theming

Configure Vuetify 4 light/dark themes and design tokens in Vue SSR applications.

3|Updated Jan 14, 2023
Search Tags:#theming#dark mode#theme tokens#light mode#vuetify#component defaults#css utility classes
One-click install
npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-theming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vuetify-theming
Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vuetify-theming
Command: npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about vuetify-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I switch between light and dark mode in Vuetify without breaking SSR hydration?▼

Switch light and dark mode in Vuetify using the `useTheme()` composable to toggle the active theme, ensuring SSR and hydration stay consistent with the current theme palette.

How do I configure Vuetify theme tokens for consistent surface and background colors?▼

Configure Vuetify theme tokens by defining `light` and `dark` palettes in `createVuetify`, including surface, background, and on-* contrast colors as a single source of truth for styling.

What is the best way to set global component defaults for variants and density in Vuetify?▼

Set global component defaults in Vuetify using `createVuetify({ defaults: {...} })` to enforce consistent variants, rounding, density, and visual props across the entire application.

Does Vuetify theming work with Vue SSR applications for dark mode override behavior?▼

Vuetify theming works with Vue SSR by establishing deterministic theme palettes and using `useTheme()` for dark-mode switching, ensuring consistent server-side rendering and client hydration.

When should I use Vuetify utility classes versus theme tokens for styling components?▼

Use Vuetify utility classes like `ma-4` and `bg-background` for quick layout and spacing, while theme tokens provide the underlying color source of truth that components reference for consistent styling.

Related Skills

Explore More Design & Creative Skills→
4tikhonov4tikhonov
3

project-init

Initialize a FIRE project by detecting workspace type and generating standards templates.

Community
Basic
DevanBDevanB

Frontend CSS

Enforce Tailwind utility classes and design system tokens in CSS files.

Community
Basic
EsposterEsposter
23

vuetify

Standardize Vuetify component patterns and accessibility guidelines in Vue apps.

Official
Advanced
oborchersoborchers
28

design-tokens

Manage design token architecture with a three-tier model and CSS custom properties.

Community
Intermediate