Is it possible to have two themes at the same time with Typescript?

[eranimo]

I am trying to, for scope reasons, add a new set of components to an app that has a new theme. This new theme has a different type signature than the old theme. The old theme is set up using the Typescript docs for styled-components and the components using it import from styled-components, not xstyled.

How can I go about doing this? I tried re-exporting the x and styled export but it looks like the X type still refers to the DefaultTheme type for some reason.

import { system, StyleGenerator, SystemProps } from '@xstyled/system';
import { createCss } from '@xstyled/styled-components';
import * as styledComponents from 'styled-components';

import { ITheme } from './theme'; // new theme type

const module = createCss<StyleGenerator<SystemProps<ITheme>>>(system);

export const css = module.css;
export const styled = module.styled;
export const x = module.x as any;

Essentially, instead of overriding the types using a declaration file I would like to re-export them with the correct theme and create components using that new component.

[quantizor]

xstyled augments @xstyled/system's Theme separately from styled-components' DefaultTheme, so the two coexist without conflict. Drop the createCss generic and augment Theme directly:

declare module '@xstyled/system' {
  export interface Theme extends ITheme {}
}

Your existing styled-components subtree keeps its DefaultTheme augmentation; your x.* subtree picks up ITheme.