Stop Hand-Building Brand Themes: Meet ThemeForge

#ai #webdev #npm #themes

"In visual perception a color is almost never seen as it really is - as it physically is. This fact makes color the most relative medium in art." - Josef Albers

A client sends over their 40-page brand guide and says "make the app look like us". You spend the afternoon picking colors, squinting at contrast checkers, and then someone asks for dark mode.

Sound Familiar?

If you build multi-tenant apps, white-label products, or client portals, you have met these:

🎨 The brand guide is written for a printer. It says CMYK C70 M4 Y100 K0 and Pantone 369 CP. Your CSS wants a hex.
👀 The brand color fails contrast. That lovely lime green makes every button label unreadable.
🌙 Dark mode doubles the work. Every color decision, made twice.
🧩 Your app already has a theme shape. Whatever you generate has to fit it without breaking anything.

None of this is hard. It is just tedious, easy to get wrong, and it lands on your desk again with every new client.

What ThemeForge Does

You give it a logo, a brand guide, or both. You get back a complete light and dark theme, checked against WCAG AA, in the same JSON shape your app already uses.

npm install @elastikteams/theme-forge

import { generateTheme } from '@elastikteams/theme-forge';

const { theme } = await generateTheme({
  logo: { buffer: logoBuffer, filename: 'logo.png' },
  styleGuide: { buffer: pdfBuffer, filename: 'brand-guide.pdf' },
  baseTheme: await db.themes.findDefault(), // optional
});

await db.themes.update(tenantId, theme);

That is the whole integration. Your frontend uploads the files, your backend calls one function, and the result goes straight back into your database.

Why Developers Like It

✅ Light and dark in one go. Both modes come back in a single object, so they never drift apart.

✅ Accessible by default. Every text, button, chip, sidebar and chart color is checked for contrast and fixed when it fails, without changing the brand's hue.

✅ Fits your existing theme. It merges onto the theme you already store and keeps your keys and structure. No schema migration.

✅ Reads real brand guides. PDF, Word, Markdown, HTML and more. Hex, RGB and CMYK values are all understood.

✅ Never invents a brand color. If it cannot find one, it tells you clearly instead of quietly shipping a generic blue theme.

✅ Friendly errors. Messages like "export the document as PDF" are written for the person who uploaded the file, so you can show them as-is to stakeholders.

✅ Optional AI help. Plug in Anthropic, OpenAI, Gemini or Groq for messy guides. If the AI call fails, it falls back to the normal path rather than failing the upload.

✅ Tells you what it changed. Every theme comes with a report of contrast results and every color it adjusted, so nothing happens silently.

Who It's For

SaaS teams offering custom branding per tenant
Agencies spinning up white-label apps for clients
Anyone who has ever been handed a brand PDF and a deadline

Final Thoughts

Brand theming should be a feature you ship once, not a chore you repeat for every client. Give ThemeForge the logo and get back a theme you can actually use.

👉 @elastikteams/theme-forge on npm

Hope this helps you ship custom branding without the busywork!
Written by Pranav Bharti

DEV Community