Published styled-components UI library does not have access to extended theme types on the consumer side

Question

I am creating UI library using styled-components. I am extending the DefaultTheme type to support custom themes that are needed for our use case. Both theme and theme definition is coming from a different internal package that I use. When working on the UI library components, it works correctly. The issue begins when we tried to use the theming on the consumer side. The problem is that, it seems that types are not really extended to the consumer correctly, so without adding styled.d.ts file on the client side, it doesn't seem to understand the types of the theme. Theme get a type anyand it should be read asDefaultTheme type.

I wonder if there is any way to expose the extended types to consumer so they don't have to add this additional file on their side?

Is there anyone out there who had similar problem? Maybe you could share your findings?

Here is my setup:

Design System project:

// theme.ts

import tokens from 'my-external-package/variables.json';
import type { ThemeProps } from 'styled-components';
import type { MyThemeType } from 'my-external-package//theme';

const { light, dark } = tokens.color.theme;

export const lightTheme = {
  color: light,
};

export const darkTheme = {
  color: dark,
};

export const defaultTheme = lightTheme;

// styled.d.ts
import {} from 'styled-components';
import type { MyThemeType } from 'my-external-package//theme';

// extend theme
declare module 'styled-components' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface DefaultTheme extends MyThemeType {}
}

// CustomThemeProvider.tsx
import React, { createContext, useState, ReactNode, useContext } from 'react';
import { ThemeProvider } from 'styled-components';
import { lightTheme, darkTheme } from './theme';

const themes = {
  light: lightTheme,
  dark: darkTheme,
};

type CustomThemeProviderProps = {
  children: ReactNode;
  defaultTheme?: keyof typeof themes;
};

const themeContext = createContext({ toggleTheme: () => {} });

const { Provider } = themeContext;

export const CustomThemeProvider = ({
  children,
  defaultTheme = 'light',
}: CustomThemeProviderProps) => {
  const [currentTheme, setCurrentTheme] = useState(defaultTheme);
  
  return (
    <Provider
      value={{
        toggleTheme: () =>
          setCurrentTheme((current) => current === 'light' ? 'dark' : 'light'),
      }}
    >
      <ThemeProvider theme={themes[currentTheme]}>{children}</ThemeProvider>
    </Provider>
  );
};

// I also export hook over here so I can use it on the client side
export const useToggleTheme = () => {
  const { toggleTheme } = useContext(themeContext);
  return toggleTheme;
};

App consumer NextJs

//_app.tsx
import type { AppProps } from 'next/app';
import { CustomThemeProvider } from 'my-library-package/theming';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <CustomThemeProvider defaultTheme='light'>
      <Component {...pageProps} />
    </CustomThemeProvider>
  );
}
export default MyApp;

// consumer_page.tsx

import type { NextPage } from 'next';
import { useCallback, useState } from 'react';
import styled from 'styled-components';
import tokens from 'my-external-package/variables.json';
import { useToggleTheme, Switch } from 'my-library-package';

const CustomComponent = styled.p`
  color: ${({ theme }) => theme.color.feedback.success.foreground};
`;

const MyPage: NextPage = () => {
 const toggleTheme = useToggleTheme();

 return (
  <>
   <Switch onChange={toggleTheme}/>
   <CustomComponent>This component have access to theme</CustomComponent>
  </>
 )
}

export default MyPage;

1. We are considering re-export utilities from styled-components with the right DefaultTheme and instruct consumers not to install styled-components
2. Instruct design-system consumers to create a styled.d.ts file to get the theme correctly populated.

Both of those seems rather painful. :(