themo 🎨

A lightweight bulk CSS variable utility with automatic prefix handling.
Without the need to re-render components.

Example

https://codesandbox.io/p/sandbox/solitary-violet-z8fgsg

Installation

``bash
npm install themo
`

Usage

`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;
*/
`

$3

Just use css variables as normal.
Remember to use the kebab-case version of the variable name.

`css
.my-component {
background-color: var(--my-app-name-primary-color);
color: var(--my-app-name-secondary-color);
}
`

$3

`typescript
const StyledComponent = styled.div
background-color: var(--my-app-name-primary-color);
color: var(--my-app-name-secondary-color);
;
`

Features

- 🔄 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

API

$3

Completely replaces all variables for the given slug. Any existing variables for this slug that are not included in the new config will be removed.

$3

Updates only the specified variables for the given slug. Existing variables not included in the config remain unchanged.

$3

Gets all CSS variables or those for a specific theme prefix.

$3

Gets the CSS string representation of all themes or a specific theme.

License

MIT