Вариации в теме, компоненты в стиле React -

Question

У меня несколько тем, скажем - Земля, Вода и так далее. В побочной теме есть вариации: Земля (светлая темнота), Вода (светлая, темная). Каждый вариант будет иметь свой набор стилей: bg-color, font-color, border-color и т. Д.

Я использую стилевые компоненты для реализации требуемого тематического поведения. Я храню свои темы в «папке с темами». Каждый мой файл темы выглядит так

 const theme = {
    brandPrimaryColor: colors.BRAND_PRIMARY,
    textColorPrimary: colors.TEXT_PRIMARY,
    backgroundColorPrimary: colors.BG_PRIMARY,
    backgroundColorSecondary: colors.BG_SECONDARY,
   borderColorBoldest: colors.ERROR,
 }
export default theme;

Все файлы тем импортированы в один файл js

 import earth from './Earthy'
 import water from './Water'

 export const Earthy = {
   earth
 }
export const Water = {
  water
}

Использование ThemeProvider тем внедряется в дочерние компоненты.

 const themeUsed = {
   main: Earthy.earthyTheme
 };
 <ThemeProvider theme={themeUsed}>
    ....
 </ThemeProvider>

До сих пор все работает нормально. Теперь я должен реализовать вариацию внутри каждой темы. Я не уверен в том, как лучше всего этого достичь. Один из способов, которым я занимался, это styled-theming. Но застрял во время реализации. Есть ли другой подход? Пожалуйста, помогите.