We are developing a design system for a NX monorepo that potentially in the future will have multiple apps (written in nextjs) which all will use one single component library. All of the apps need to have their own theme, but one default theme is used for all the components in the UI component library. The UI component library needs to have access to every app's theme to overwrite the default theme. What we would like to use is scss/css modules for each component that could then be customised by each app. What tools or methods/techniques can we use to achive this functionality?
Directory structure:
- /apps/site1/site1-theme -> { primary: 'red' }
- /apps/site2/site2-theme -> { primary: 'blue' }
- /libs/ui-lib/components
The UI library has a button component that has a default color of green. When site1 uses the button it should be red and blue for site2. We could pass theme object down as props to each of the components but that would be tedious and we rather be able to tell the ui library "this our theme use it" The technology we are using is nx / typescript / nextjs / scss