Declare multiple themes and maintain types in a single monorepo?

[cmaycumber]

I know this might be an uncommon use case, but do you have any idea how I might be able to declare multiple custom themes for different projects in a single repo?

[nandorojo]

Yeah I could see that being a need. I'd say this:

1. Have a base theme

This theme should define the template for every one of your monorepo's themes.

For example, if your base theme looks like this:

export const theme = makeTheme({ colors: { background: 'black', text: 'white' } })

type MyTheme = typeof theme

declare module 'dripsy' {
  interface DripsyCustomTheme extends MyTheme {}
}

Every other theme you create just needs to match the same shape as your base theme.

2. Create other themes

Now, you can import the Theme type from Dripsy. It will match the schema of your base theme.

import { Theme } from 'dripsy

export const lightTheme: Theme = {
  colors: {
    background: 'white',
    text: 'black'
  }
}

I haven't actually tried that, so I'm not sure if it will complain if that your colors don't match up exactly. If it does, you could do something like this:

import { theme } from './base'

// make sure you don't mutate the original theme
export const themeLight = { ...theme }

themeLight.colors = {
  background: 'white',
  text: 'black'
}

I use this method ^ for light and dark themes, so presumably the same would work for multiple themes in a monorepo. I could actually see this being a normal use-case, for example if you're an agency building many different apps with the same layout for people.

I think the pattern of a base theme is pretty ideal, since you'd expect every theme to have the same potential values, given that the same components will consume the theme throughout a monorepo.

Let me know if that answers your question.

[nandorojo]

Going to close this unless it's still unresolved