A lightweight bulk CSS variable utility with automatic prefix handling. Without the need to re-render components.
npm install themoA lightweight bulk CSS variable utility with automatic prefix handling.
Without the need to re-render components.
``bash`
npm install themo
`typescript
import { Theme as t } from 'themo';
// Create a theme with a prefix (e.g., 'my-app-name')
t.set('my-app-name', {
// camelCase example (will be converted to/accessible as kebab-case)
primaryColor: '#000000',
// normal kebab-case example
"secondary-color": '#FFFFFF',
});
// This generates CSS variables:
// --my-app-name-primary-color: #000000;
// --my-app-name-secondary-color: #FFFFFF;
// Patch only specific variables without removing others
t.patch('my-app-name', {
primaryColor: '#FF0000',
// secondary-color remains unchanged
});
// Get all slug/prefix variables (JSON)
const variables = t.get();
// Output: { '--my-app-name-primary-color': '#FF0000', '--my-app-name-secondary-color': '#FFFFFF' }
// Get variables for specific slug/prefix (JSON)
const myAppNameVariables = t.get('my-app-name');
// Output: { '--my-app-name-primary-color': '#FF0000', '--my-app-name-secondary-color': '#FFFFFF' }
// Get CSS string for all slugs/prefixes (CSS string)
const css = t.getCSS();
/* Output:
:root {
--my-app-name-primary-color: #FF0000;
--my-app-name-secondary-color: #FFFFFF;
}
*/
// Get CSS string for specific slug/prefix (CSS string)
const myAppNameCSS = t.getCSS('my-app-name');
/* Output:
--my-app-name-primary-color: #FF0000;
--my-app-name-secondary-color: #FFFFFF;
*/
`
`css`
.my-component {
background-color: var(--my-app-name-primary-color);
color: var(--my-app-name-secondary-color);
}
`typescript
const StyledComponent = styled.div
background-color: var(--my-app-name-primary-color);
color: var(--my-app-name-secondary-color);;`
- ð Automatically prefixes CSS variables with your theme slug
- ðŠķ Zero dependencies
- ðŊ TypeScript support out of the box
- ð Real-time CSS variable updates without re-rendering
- ðĻ Automatic camelCase to kebab-case conversion
- ðĶ ESM and CommonJS support
- ð Flexible variable updates with set and patch` methods
MIT