Managing multiple themes

[kennetpostigo]

Hi 👋

Using Dripsy in my RN app, and I keep running into an type error that occurs, that I believe happens when I have multiple themes.

Theme

I didn't run into it before adding a second theme, here is the code for theme. Both light and dark themes are identical with exception to colors, they have the same keys, but different values.

// theme.ts
export const darkTheme = makeTheme({
  customFonts: { ... },
  fonts: { ... },
  fontWeights: { ... },
  fontSizes: { ... },
  letterSpacings: { ... },
  space: { ... },
  sizes: { ... },
  borderWidths: { ... },
  borderStyles: { ... },
  colors: { ... }
});

export const lightTheme = makeTheme({
  customFonts: { ... },
  fonts: { ... },
  fontWeights: { ... },
  fontSizes: { ... },
  letterSpacings: { ... },
  space: { ... },
  sizes: { ... },
  borderWidths: { ... },
  borderStyles: { ... },
  colors: { ... }
});

export type DarkTheme = typeof darkTheme;
export type LightTheme = typeof lightTheme;

declare module 'dripsy' {
  interface DripsyCustomTheme extends DarkTheme, LightTheme {}
}

App Component

Here is App.tsx and it throws an error on the theme prop, because light and dark theme are distinct.

Type Error

The type error here mentions the issue about colors

src/App.tsx:18:25 - error TS2322: Type '{ customFonts: { Inter: { bold: "Inter-Bold"; default: "Inter-Regular"; normal: "Inter-Regular"; 100: "Inter-ExtraLight"; 200: "Inter-Light"; 300: "Inter-Regular"; 400: "Inter-Regular"; 500: "Inter-Medium"; 600: "Inter-SemiBold"; 700: "Inter-Bold"; 800: "Inter-ExtraBold"; 900: "Inter-Black"; }; }; ... 10 more ...; c...' is not assignable to type 'DripsyFinalTheme'.
  Type '{ customFonts: { Inter: { bold: "Inter-Bold"; default: "Inter-Regular"; normal: "Inter-Regular"; 100: "Inter-ExtraLight"; 200: "Inter-Light"; 300: "Inter-Regular"; 400: "Inter-Regular"; 500: "Inter-Medium"; 600: "Inter-SemiBold"; 700: "Inter-Bold"; 800: "Inter-ExtraBold"; 900: "Inter-Black"; }; }; ... 10 more ...; c...' is not assignable to type 'DripsyFinalTheme'.
    Types of property 'colors' are incompatible.
      Type '{ text: "hsl(0,0%, 0%)"; background: "hsl(0,0%, 100%)"; primary: "hsl(0,0%, 0%)"; staticWhite: "hsl(0,0%, 100%)"; staticTranlucent: "hsla(0, 0%, 100%, 0.35)"; staticBlack: "hsl(0,0%, 0%)"; ... 62 more ...; yellow1000: "hsl(51, 77%, 32%)"; }' is not assignable to type 'never'.
        The intersection '{ text: "hsl(0,0%, 100%)"; background: "hsl(0,0%, 0%)"; primary: "hsl(0,0%, 100%)"; staticWhite: "hsl(0,0%, 100%)"; staticTranlucent: "hsla(0, 0%, 0%, 0.35)"; gray50: "hsl(0, 0%, 3%)"; ... 61 more ...; yellow1000: "hsl(242,  94%, 96%)"; } & { ...; }' was reduced to 'never' because property 'text' has conflicting types in some constituents.

18         <DripsyProvider theme={colorScheme === 'dark' ? darkTheme : lightTheme }>
                           ~~~~~

  node_modules/@dripsy/core/build/provider/context.d.ts:3:5
    3     theme: DripsyFinalTheme;
          ~~~~~
    The expected type comes from property 'theme' which is declared here on type 'IntrinsicAttributes & Props'


Found 1 error in src/App.tsx:18

Question

Is there a pattern for managing multiple themes with dripsy without type errors? It only happened once I introduced a second theme. In addition I have no autocomplete with sx, I believe because of this.

[nandorojo]

i think you can more simply do:

const lightTheme: typeof darkTheme = {
  …darkTheme,
  colors: { 
    // light colors here 
  }
}

and then remove the module declaration for both themes. the two themes should have the same keys for colors.

[kennetpostigo]

@nandorojo thank you for the response, your suggestion solved the App.tsx type error!

However, I still don't get autocomplete for theme in sx prop:

<Text sx={{ color: '' }}>{children}</Text> //  <--- No autocomplete on color or any other property

Is there anything I need to do for the autocomplete to work, I followed the Typescript section as closely as possible, but can't get it to work.

[nandorojo]

Can you try this:

interface DripsyCustomTheme extends DarkTheme {}

[nandorojo]

If that doesn't work, can you try typescript 4.4? I think higher versions may not be working currently. #242

[kennetpostigo]

Gotcha, yea, i'm using expo and it's on a higher version so downgrading typescript makes it work. Thank you @nandorojo !