[RFC] How should theme be extended

Goals

• Allow easy extension of our theme configuration
• Allow following our pattern with specific theming per component

Background

Currently, we export our theme configuration and our custom color themes (dark/light)

We also export createTheme to allow other projects creating their own theme or completely overriding the ones we produced.

❎ We do not export a simple way to extend our already defined dark and light themes.

From stitches doc, I see no way to extend themes.

They only show how to extend the default theme returned by createStitches with createTheme.

Proposals

1. Should we create custom local themes when we need per component extensions ?

import customThemeConfig from './CustomElement.themes.ts';

const CustomElement: () => JSX.Element = ...;

const customElementTheme = createTheme(..., {

...customThemeConfig, // somehow we add the custom theme config
});

const CustomElementWithTheme = () => {
  return (
    <div className={customElementTheme}>
      <CustomElement />
    </div>
  );
}

export default CustomElementWithTheme

I fear we might lose dark/light themes for the specific component's context to gain our custom config.

NB: I don't really like this option so far.

2. Maybe we could expose a way to extend dark and light themes easily?

export const extendTheme: (existingTheme: 'dark' | 'light') => ReturnType<typeof createTheme>