Allow consumer to edit stitches.config within of UI Component Library

[bestickley]

I've created a UI component library with stitches and want consumers of the package to be able to edit the theme. This means I need the consumer of the package to be able to update what's passed to createStitches. Here is how I did it:

lib/theme.ts

import { green } from "@radix/colors";
export const defaultColors = { primary12: green.green12 };

lib/stitches.config.ts

import { createStitches } from "@stitches/react";
import { defaultColors } from "./theme.js";

export { styled } = createStitches({ colors: defaultColors });

consumer/customizeTheme.js

import { purple } from "@radix/colors";
export const defaultColors = { primary12: purple.purple12 };

consumer/main.tsx

import { render } from "react-dom";
import "./customizeTheme.js"; // must be imported before App
import { App } from "./App.jsx";
render(<App />, document.getElementById("app"));

consumer/App.tsx

import { styled } from "lib/stitches.config";
const Box = styled("div", { backgroundColor: "$primary12" });  // this will be purple!
export const App = () => <Box />;

Can you think of a better approach? Let me know!

[PhilGarb]

I stumbled upon something similar a while back. The custom theme api worked for me. So with your example that would be:

import { createTheme } from "lib/stitches.config"

// The key primary12 needs to exist in the original theme for proper typing. I have not found a way to add keys.
const localTheme = createTheme({
  primary12: "$purple12"
})

export const App = () => <Box className={localTheme} />

The result is very similar to yours, but you get full typing for all tokens inside of createTheme() and it does not matter that you import any js in order. The main benefit, I have found, is that you don't have to apply this to the entire App. You can rather put it onto every component you like and the theme will be applied to the children of that component.

[bestickley]

This is a much better solution, @PhilGarb! Thanks so much.