add-theme

Name: add-theme
Availability: InStock
Author: unlighted01

Add CSS variable-driven themes and dark mode to ResearchMate UI components.

Updated Dec 8, 2025

Search Tags:#minimalist #theme #ui-design #dark-mode #css-variables #glass #bubble

Ready to run

npx skills add https://github.com/Unlighted01/ResearchMate-Website --skill add-theme

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: add-theme
Source: https://github.com/Unlighted01/ResearchMate-Website/tree/main/.claude/skills/ui/add-theme
Command: npx skills add https://github.com/Unlighted01/ResearchMate-Website --skill add-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Add theme support to a ResearchMate component, including glass, bubble, and minimalist styles, and enable dark mode by introducing a centralized CSS variable system and updating index.css.

Core Features & Use Cases

Theme support for components in three visual styles (glass, bubble, minimalist) with dark mode variants.
CSS variable integration: standardizes colors, surfaces, typography via a consistent set of --ui-* variables in index.css.
Use case: when updating a component to support theming or adding a new theme, ensure consistent styling across light and dark contexts.

Quick Start

Implement glass, bubble, and minimalist themes with dark mode by updating CSS variables in index.css and applying backdrop-filter for glass surfaces.

Frequently Asked Questions about add-theme

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

FAQPage Schema

How do I add dark mode and CSS variable theming to UI components?▼

To add dark mode and CSS variable theming, update index.css with a standardized set of --ui-* variables like --ui-surface-bg. This enables consistent theme application across light and dark contexts for your components.

What is the best way to implement a glass theme with backdrop-filter in CSS?▼

Implementing a glass theme requires applying backdrop-filter to glass surfaces alongside centralized CSS variables. This ensures the frosted glass visual style remains consistent and responds correctly to dark mode variants.

How do I convert existing component styles to minimalist and bubble visual themes?▼

Converting components to minimalist and bubble themes involves mapping current styling to a centralized CSS variable system. You update index.css to drive the visual styles, ensuring consistent rendering across both light and dark mode contexts.

Can I use CSS variables to standardize colors and typography for dark mode?▼

Yes, you can use CSS variables to standardize colors, surfaces, and typography for dark mode. By defining a consistent set of --ui-* variables in index.css, you ensure style consistency across all component theme conversions.