Menu
Light and dark theme system with CSS variables. Use for theming support in applications with automatic theme switching.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Accordion component with collapsible sections. Use for FAQs, nested content, or expandable details sections.
Button component with variants, sizes, loading states, and icon support. Use when creating clickable actions, forms, or navigation buttons.
Calendar component for date and month selection. Use when building date pickers, scheduling interfaces, or date range selectors.
Carousel component for image/content sliders with navigation controls. Use for image galleries, hero sections, or content that scrolls horizontally.
Checkbox component for boolean or multi-select inputs. Use when building forms with boolean toggles or multiple selection lists.
Dropdown menu component with trigger and content pattern. Use when building selectable menus, action menus, or nested navigation.
| name | mint-css-theme |
| description | Light and dark theme system with CSS variables. Use for theming support in applications with automatic theme switching. |
/* Full import includes theme */
import '@groww-tech/mint-css/dist/index.css';
/* Theme utilities */
@import '@groww-tech/mint-css/dist/fragments/themeUtilities.css';
/* All variables */
@import '@groww-tech/mint-css/dist/fragments/allVariables.css';
html {
/* Light theme variables */
--color-background-primary: ...;
--color-background-secondary: ...;
--color-content-primary: ...;
--color-content-secondary: ...;
/* etc. */
}
html[data-theme="dark"] {
/* Dark theme variables */
--color-background-primary: ...;
--color-background-secondary: ...;
--color-content-primary: ...;
--color-content-secondary: ...;
/* etc. */
}
/* Automatically uses dark theme when data-theme="dark" */
html[data-theme="dark"] {
background-color: var(--background-primary);
color: var(--content-primary);
}
// Set dark theme
document.documentElement.setAttribute('data-theme', 'dark');
// Set light theme
document.documentElement.setAttribute('data-theme', 'light');
// Toggle theme
const toggle = () => {
const current = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
};
// Using useEffect
import { useEffect, useState } from 'react';
const ThemeToggle = () => {
const [theme, setTheme] = useState('light');
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
}, [theme]);
return (
<button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
Toggle Theme
</button>
);
};
// Detect system preference
const getSystemTheme = () => {
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
};
// Listen for changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
});
The theme system supports smooth transitions:
html.color-theme-in-transition * {
transition: background-color 0.3s, color 0.3s !important;
}
// Enable transition before theme change
document.documentElement.classList.add('color-theme-in-transition');
document.documentElement.setAttribute('data-theme', 'dark');
// Remove after transition
setTimeout(() => {
document.documentElement.classList.remove('color-theme-in-transition');
}, 300);
The theme system provides semantic tokens:
background-primary /* Main background */
background-secondary /* Secondary background */
background-tertiary /* Tertiary/cards */
content-primary /* Primary text */
content-secondary /* Secondary text */
content-tertiary /* Disabled/hint text */
border-primary /* Primary borders */
border-secondary /* Subtle borders */
.my-button {
background-color: var(--background-primary);
color: var(--content-primary);
border: 1px solid var(--border-primary);
}
.my-button:hover {
background-color: var(--background-secondary);
}
.my-card {
background-color: var(--background-secondary);
border: 1px solid var(--border-primary);
}
var(--content-primary) over hex colors