skills.rest
Unlighted01
Unlighted01COMMUNITY
Explore all skills by this author →
GitHub

add-theme

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
One-click install
npx skills add https://github.com/Unlighted01/ResearchMate-Website --skill add-theme
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Devinga-com-brDevinga-com-br

tailwind-v4-shadcn

Configure Tailwind v4 with shadcn/ui using CSS variables and automatic dark mode.

Official
Intermediate
Columbia-Cloudworks-LLCColumbia-Cloudworks-LLC
1

tailwind-design-system

Standardize Tailwind UI with design tokens, CVA components, and dark mode patterns.

Official
Advanced
SSujitXSSujitX
11

UI Design System

Standardize UI development with Tailwind CSS, Shadcn UI, and custom theming.

Community
Intermediate
whimzyLivewhimzyLive
3

tailwind-design-system

Configure Tailwind CSS v4 themes with CSS variables and dark mode.

Community
Advanced