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

npm install themo

Usage

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

Using in CSS

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

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

Using with Styled Components

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

Theme.set(slug: string, config: ThemeConfig)

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.

Theme.patch(slug: string, config: ThemeConfig)

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

Theme.get(slug?: string)

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

Theme.getCSS(slug?: string)

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

License

MIT