themed_varmory

A themed skin for Varmory — swappable Quasar themes, a theme store, themed components, and an MCP server for AI agents.

themed_varmory layers swappable visual themes on top of Varmory's interactive component showcase. Browse live previews, switch themes and dark mode at runtime, copy code — and expose the same metadata to AI agents like Claude via the built-in Model Context Protocol server.

Built-in themes

• default
• rpg
• space
• finance

Component categories

• Helpers
• Colors
• Typography
• Icons
• Buttons
• Dialogs
• Lists
• Menu
• Panels
• Inputs
• Tabs & Steppers
• Rich Text Editor
• Tables

Features

• Swappable themes — default, rpg, space, finance; each a { common, dark, light } CSS-variable triple
• Runtime theme + dark-mode switching via the useThemeStore Pinia store
• Themed helper components — JPanel, JThemeSwitcher, JDarkSwitcher, JCurrentYear
• Interactive showcase layered on top of Varmory's built-in catalogue
• Semantic search (hybrid dense embeddings + BM25 via vecito)
• MCP server — AI agents can query component APIs, templates, and docs

Links

• npm: themed_varmory
• GitHub: jeka-kiselyov/themed_varmory
• varmory — the base showcase framework

Documentation

• Usage — Vite config, Quasar plugin wiring, fresh app setup
• Theming — the theme contract, custom themes, dark/light
• Accent Background — themed panel accents
• Building Components — API style, layout patterns, composition
• MCP Server — AI agent integration, tools, resources, search index

MCP Server

A public Streamable HTTP MCP server is available for AI agents:

claude mcp add --transport http themed_varmory https://themed-varmory-384cf7df8efa.herokuapp.com/mcp

Quick install

npm install themed_varmory
npm install vue@^3 quasar@^2 @quasar/extras@^2